Skip to content

Commit 496072f

Browse files
Jerry-CodeHubJerry-CodeHub
committed
fix: freequency file get position hz
1 parent 722d12e commit 496072f

4 files changed

Lines changed: 143 additions & 69 deletions

File tree

‎src/pages/Feature/.DS_Store‎

0 Bytes
Binary file not shown.

‎src/pages/Feature/D3/DataDemo.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Frequency = () => {
6161
d3.select(svgRef.current).selectAll('*').remove();
6262

6363
// 设置尺寸和边距
64-
const margin = { top: 50, right: 40, bottom: 50, left: 40 };
64+
const margin = { top: 50, right: 0, bottom: 50, left: 0 };
6565
const width = Math.max(containerRef.current.clientWidth - margin.left - margin.right, 800);
6666
// const typeHeight = 150;
6767
// const height = data.length * typeHeight + margin.top + margin.bottom;
@@ -201,33 +201,33 @@ const Frequency = () => {
201201

202202
// 6. 更新 tooltip 显示
203203
const tooltipContent = `
204-
<div>
205-
<div style="font-weight: bold; margin-bottom: 8px;">
206-
当前频率: ${formatFrequency(currentFrequency)}
207-
</div>
208-
${
209-
matches.length > 0
210-
? matches
211-
.map(
212-
(match: any) => `
213-
<div style="margin-bottom: 8px;">
214-
<div style="color: ${match.color}; font-weight: bold;">
215-
${match.typeName} - ${match.frequencyName}
216-
</div>
217-
<div>
218-
频率范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
219-
</div>
220-
<pre style="background: #f5f5f5; padding: 8px; border-radius: 4px; margin: 4px 0 0 0;">
221-
${JSON.stringify(match.customInfo, null, 2)}
222-
</pre>
204+
<div>
205+
<div style="font-weight: bold; margin-bottom: 8px;">
206+
当前频率: ${formatFrequency(currentFrequency)}
223207
</div>
224-
`,
225-
)
226-
.join('<hr style="margin: 8px 0;">')
227-
: '<div style="color: #666;">当前频率范围内无匹配项</div>'
228-
}
229-
</div>
230-
`;
208+
${
209+
matches.length > 0
210+
? matches
211+
.map(
212+
(match: any) => `
213+
<div style="margin-bottom: 8px;">
214+
<div style="color: ${match.color}; font-weight: bold;">
215+
${match.typeName} - ${match.frequencyName}
216+
</div>
217+
<div>
218+
频率范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
219+
</div>
220+
<pre style="background: #f5f5f5; padding: 8px; border-radius: 4px; margin: 4px 0 0 0;">
221+
${JSON.stringify(match.customInfo, null, 2)}
222+
</pre>
223+
</div>
224+
`,
225+
)
226+
.join('<hr style="margin: 8px 0;">')
227+
: '<div style="color: #666;">当前频率范围内无匹配项</div>'
228+
}
229+
</div>
230+
`;
231231

232232
tooltip
233233
.style('visibility', 'visible')
@@ -421,14 +421,14 @@ ${JSON.stringify(match.customInfo, null, 2)}
421421
范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
422422
</div>
423423
<pre style="background: #f5f5f5; padding: 8px; margin-top: 4px; border-radius: 4px;">
424-
${JSON.stringify(match.customInfo, null, 2)}
425-
</pre>
426-
</div>
427-
`,
424+
${JSON.stringify(match.customInfo, null, 2)}
425+
</pre>
426+
</div>
427+
`,
428428
)
429429
.join('<hr style="margin: 8px 0;">')}
430-
</div>
431-
`);
430+
</div>
431+
`);
432432
}
433433
}
434434
});
@@ -450,7 +450,7 @@ ${JSON.stringify(match.customInfo, null, 2)}
450450
频率范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
451451
</div>
452452
<pre style="background: #f5f5f5; padding: 8px; margin-top: 4px; border-radius: 4px; white-space: pre-wrap;">
453-
${JSON.stringify(match.customInfo, null, 2)}
453+
${JSON.stringify(match.customInfo, null, 2)}
454454
</pre>
455455
</div>
456456
`,

‎src/pages/Feature/D3/Frequency.tsx‎

Lines changed: 104 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const Frequency = () => {
6161
d3.select(svgRef.current).selectAll('*').remove();
6262

6363
// 设置尺寸和边距
64-
const margin = { top: 50, right: 40, bottom: 50, left: 40 };
64+
const margin = { top: 50, right: 0, bottom: 50, left: 0 };
6565
const width = Math.max(containerRef.current.clientWidth - margin.left - margin.right, 800);
6666
// const typeHeight = 150;
6767
// const height = data.length * typeHeight + margin.top + margin.bottom;
@@ -421,14 +421,14 @@ const Frequency = () => {
421421
范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
422422
</div>
423423
<pre style="background: #f5f5f5; padding: 8px; margin-top: 4px; border-radius: 4px;">
424-
${JSON.stringify(match.customInfo, null, 2)}
425-
</pre>
426-
</div>
427-
`,
424+
${JSON.stringify(match.customInfo, null, 2)}
425+
</pre>
426+
</div>
427+
`,
428428
)
429429
.join('<hr style="margin: 8px 0;">')}
430-
</div>
431-
`);
430+
</div>
431+
`);
432432
}
433433
}
434434
});
@@ -450,7 +450,7 @@ ${JSON.stringify(match.customInfo, null, 2)}
450450
频率范围: ${formatFrequency(match.range[0])} - ${formatFrequency(match.range[1])}
451451
</div>
452452
<pre style="background: #f5f5f5; padding: 8px; margin-top: 4px; border-radius: 4px; white-space: pre-wrap;">
453-
${JSON.stringify(match.customInfo, null, 2)}
453+
${JSON.stringify(match.customInfo, null, 2)}
454454
</pre>
455455
</div>
456456
`,
@@ -528,18 +528,86 @@ ${JSON.stringify(match.customInfo, null, 2)}
528528
// };
529529

530530
// 映射频率到位置的函数
531-
const getFrequencyPosition = (hz: number) => {
532-
// 找到对应的刻度标签
533-
const nearestTick = frequencyTicks.find((tick: any) => tick.value === hz);
534-
if (nearestTick) {
535-
// 如果频率值正好对应某个刻度，直接返回刻度位置
536-
return xScale(nearestTick.label);
537-
}
531+
// const getFrequencyPosition = (hz: number) => {
532+
// // 找到对应的刻度标签
533+
// const nearestTick = frequencyTicks.find((tick: any) => tick.value === hz);
534+
// if (nearestTick) {
535+
// // 如果频率值正好对应某个刻度，直接返回刻度位置
536+
// return xScale(nearestTick.label);
537+
// }
538+
539+
// // 找到最接近的两个刻度点
540+
// let leftTick = frequencyTicks[0];
541+
// let rightTick = frequencyTicks[1];
542+
543+
// for (let i = 0; i < frequencyTicks.length - 1; i++) {
544+
// if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
545+
// leftTick = frequencyTicks[i];
546+
// rightTick = frequencyTicks[i + 1];
547+
// break;
548+
// }
549+
// }
550+
551+
// // 获取两个刻度点的位置
552+
// const leftPos = xScale(leftTick.label);
553+
// const rightPos = xScale(rightTick.label);
554+
555+
// // 如果找不到合适的区间，返回 0 或最大值
556+
// if (!leftPos || !rightPos) {
557+
// return hz <= leftTick.value
558+
// ? xScale(frequencyTicks[0].label)
559+
// : xScale(frequencyTicks[frequencyTicks.length - 1].label);
560+
// }
561+
562+
// return leftPos;
563+
// };
564+
565+
// 改进频率到位置的映射函数
566+
// const getXPosition = (hz: number) => {
567+
// // 1. 首先找到包含这个频率值的刻度区间
568+
// let leftTick, rightTick;
569+
570+
// // 处理边界情况
571+
// if (hz <= frequencyTicks[0].value) {
572+
// return xScale(frequencyTicks[0].label);
573+
// }
574+
// if (hz >= frequencyTicks[frequencyTicks.length - 1].value) {
575+
// return xScale(frequencyTicks[frequencyTicks.length - 1].label);
576+
// }
577+
578+
// // 找到频率值所在的刻度区间
579+
// for (let i = 0; i < frequencyTicks.length - 1; i++) {
580+
// if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
581+
// leftTick = frequencyTicks[i];
582+
// rightTick = frequencyTicks[i + 1];
583+
// break;
584+
// }
585+
// }
586+
587+
// // 2. 计算在区间内的精确位置
588+
// const leftX = xScale(leftTick.label);
589+
// const rightX = xScale(rightTick.label);
590+
591+
// // 3. 使用对数比例计算位置
592+
// // 因为频率是对数性质的，所以在计算区间内的相对位置时应该使用对数插值
593+
// const logProgress =
594+
// (Math.log(hz) - Math.log(leftTick.value)) / (Math.log(rightTick.value) - Math.log(leftTick.value));
595+
596+
// // 返回插值计算的位置
597+
// return leftX + (rightX - leftX) * logProgress;
598+
// };
538599

539-
// 找到最接近的两个刻度点
540-
let leftTick = frequencyTicks[0];
541-
let rightTick = frequencyTicks[1];
600+
const getXPosition = (hz: number) => {
601+
// 处理边界情况
602+
if (hz <= frequencyTicks[0].value) {
603+
return xScale(frequencyTicks[0].label);
604+
}
605+
if (hz >= frequencyTicks[frequencyTicks.length - 1].value) {
606+
return xScale(frequencyTicks[frequencyTicks.length - 1].label);
607+
}
542608

609+
// 找到包含该频率值的刻度区间
610+
let leftTick, rightTick;
543611
for (let i = 0; i < frequencyTicks.length - 1; i++) {
544612
if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
545613
leftTick = frequencyTicks[i];
@@ -548,26 +616,32 @@ ${JSON.stringify(match.customInfo, null, 2)}
548616
}
549617
}
550618

551-
// 获取两个刻度点的位置
619+
// 如果找不到适合的区间（这种情况不应该发生，但我们需要处理）
620+
if (!leftTick || !rightTick) {
621+
console.warn('无法为频率值找到合适的区间:', formatFrequency(hz));
622+
return null;
623+
}
624+
625+
// 获取刻度点的位置
552626
const leftPos = xScale(leftTick.label);
553627
const rightPos = xScale(rightTick.label);
554628

555-
// 如果找不到合适的区间，返回 0 或最大值
556-
if (!leftPos || !rightPos) {
557-
return hz <= leftTick.value
558-
? xScale(frequencyTicks[0].label)
559-
: xScale(frequencyTicks[frequencyTicks.length - 1].label);
560-
}
629+
// 在对数空间中计算相对位置
630+
const logHz = Math.log10(hz);
631+
const logLeft = Math.log10(leftTick.value);
632+
const logRight = Math.log10(rightTick.value);
561633

562-
return leftPos;
634+
// 使用对数插值计算实际位置
635+
const progress = (logHz - logLeft) / (logRight - logLeft);
636+
return leftPos + (rightPos - leftPos) * progress;
563637
};
564638

565639
// 绘制频率块
566640
typeData.ranges.forEach((freq: any, i: any) => {
567-
// const startX = getXPosition(freq.range[0]);
568-
// const endX = getXPosition(freq.range[1]);
569-
const startX = getFrequencyPosition(freq.range[0]);
570-
const endX = getFrequencyPosition(freq.range[1]);
641+
const startX = getXPosition(freq.range[0]);
642+
const endX = getXPosition(freq.range[1]);
643+
// const startX = getFrequencyPosition(freq.range[0]);
644+
// const endX = getFrequencyPosition(freq.range[1]);
571645
const blockHeight = 25; // 频率块高度
572646
const yOffset = 35 + freq.level * (blockHeight + 5); // 计算频率块的垂直位置
573647

‎src/pages/Feature/D3/components/DataUnit.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const frequencyTicks: any = [
2222
// 频率数组
2323
export const data: any = [
2424
{
25-
typeName: '无线设备',
25+
typeName: '无线设备1',
2626
ranges: [
2727
{
2828
frequencyName: '设备0',
@@ -115,7 +115,7 @@ export const data: any = [
115115
],
116116
},
117117
{
118-
typeName: '无线设备',
118+
typeName: '无线设备2',
119119
ranges: [
120120
{
121121
frequencyName: '设备c',
@@ -186,11 +186,11 @@ export const data: any = [
186186
],
187187
},
188188
{
189-
typeName: '无线设备',
189+
typeName: '无线设备3',
190190
ranges: [
191191
{
192192
frequencyName: '设备A',
193-
range: [100000, 5000000], // 100kHz-500kHz
193+
range: [100000, 500000], // 100kHz-500kHz
194194
color: '#4299e1',
195195
slashStyle: { forward: true, backward: false },
196196
customInfo: {
@@ -213,7 +213,7 @@ export const data: any = [
213213
],
214214
},
215215
{
216-
typeName: '无线设备',
216+
typeName: '无线设备4',
217217
ranges: [
218218
{
219219
frequencyName: '设备A',

0 commit comments

Comments
 (0)