Skip to content

Commit 2a19d7b

Browse files
Jerry-CodeHubJerry-CodeHub
committed
style: frequency file style
1 parent 496072f commit 2a19d7b

4 files changed

Lines changed: 34 additions & 122 deletions

File tree

‎src/pages/Feature/.DS_Store‎

0 Bytes
Binary file not shown.

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

Lines changed: 25 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -518,28 +518,17 @@ const Frequency = () => {
518518
});
519519

520520
// 映射频率到刻度位置
521-
// const getXPosition = (hz: any) => {
522-
// const label: any = labelMap.get(
523-
// frequencyTicks.reduce((prev: any, curr: any) =>
524-
// Math.abs(curr.value - hz) < Math.abs(prev.value - hz) ? curr : prev,
525-
// ).value,
526-
// );
527-
// return xScale(label);
528-
// };
529-
530-
// 映射频率到位置的函数
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);
521+
const getXPosition = (hz: number) => {
522+
// 处理边界情况
523+
if (hz <= frequencyTicks[0].value) {
524+
return xScale(frequencyTicks[0].label);
525+
}
526+
if (hz >= frequencyTicks[frequencyTicks.length - 1].value) {
527+
return xScale(frequencyTicks[frequencyTicks.length - 1].label);
537528
}
538529

539-
// 找到最接近的两个刻度点
540-
let leftTick = frequencyTicks[0];
541-
let rightTick = frequencyTicks[1];
542-
530+
// 找到包含该频率值的刻度区间
531+
let leftTick, rightTick;
543532
for (let i = 0; i < frequencyTicks.length - 1; i++) {
544533
if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
545534
leftTick = frequencyTicks[i];
@@ -548,26 +537,30 @@ const Frequency = () => {
548537
}
549538
}
550539

551-
// 获取两个刻度点的位置
540+
// 如果找不到适合的区间（这种情况不应该发生，但我们需要处理）
541+
if (!leftTick || !rightTick) {
542+
console.warn('无法为频率值找到合适的区间:', formatFrequency(hz));
543+
return null;
544+
}
545+
546+
// 获取刻度点的位置
552547
const leftPos = xScale(leftTick.label);
553548
const rightPos = xScale(rightTick.label);
554549

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

562-
return leftPos;
555+
// 使用对数插值计算实际位置
556+
const progress = (logHz - logLeft) / (logRight - logLeft);
557+
return leftPos + (rightPos - leftPos) * progress;
563558
};
564559

565560
// 绘制频率块
566561
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]);
562+
const startX = getXPosition(freq.range[0]);
563+
const endX = getXPosition(freq.range[1]);
571564
const blockHeight = 25; // 频率块高度
572565
const yOffset = 35 + freq.level * (blockHeight + 5); // 计算频率块的垂直位置
573566

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

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -518,85 +518,6 @@ const Frequency = () => {
518518
});
519519

520520
// 映射频率到刻度位置
521-
// const getXPosition = (hz: any) => {
522-
// const label: any = labelMap.get(
523-
// frequencyTicks.reduce((prev: any, curr: any) =>
524-
// Math.abs(curr.value - hz) < Math.abs(prev.value - hz) ? curr : prev,
525-
// ).value,
526-
// );
527-
// return xScale(label);
528-
// };
529-
530-
// 映射频率到位置的函数
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-
// };
599-
600521
const getXPosition = (hz: number) => {
601522
// 处理边界情况
602523
if (hz <= frequencyTicks[0].value) {
@@ -640,8 +561,6 @@ const Frequency = () => {
640561
typeData.ranges.forEach((freq: any, i: any) => {
641562
const startX = getXPosition(freq.range[0]);
642563
const endX = getXPosition(freq.range[1]);
643-
// const startX = getFrequencyPosition(freq.range[0]);
644-
// const endX = getFrequencyPosition(freq.range[1]);
645564
const blockHeight = 25; // 频率块高度
646565
const yOffset = 35 + freq.level * (blockHeight + 5); // 计算频率块的垂直位置
647566

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -189,8 +189,8 @@ export const data: any = [
189189
typeName: '无线设备3',
190190
ranges: [
191191
{
192-
frequencyName: '设备A',
193-
range: [100000, 500000], // 100kHz-500kHz
192+
frequencyName: '设备1',
193+
range: [100000, 5000000000], // 100kHz-500kHz
194194
color: '#4299e1',
195195
slashStyle: { forward: true, backward: false },
196196
customInfo: {
@@ -200,8 +200,8 @@ export const data: any = [
200200
},
201201
},
202202
{
203-
frequencyName: '设备A',
204-
range: [100000, 500000], // 100kHz-500kHz
203+
frequencyName: '设备2',
204+
range: [10000000, 5000000000], // 100kHz-500kHz
205205
color: '#4299e1',
206206
slashStyle: { forward: true, backward: false },
207207
customInfo: {
@@ -216,8 +216,8 @@ export const data: any = [
216216
typeName: '无线设备4',
217217
ranges: [
218218
{
219-
frequencyName: '设备A',
220-
range: [100000, 500000], // 100kHz-500kHz
219+
frequencyName: '设备1',
220+
range: [1000000, 50000000000], // 100kHz-500kHz
221221
color: '#4299e1',
222222
slashStyle: { forward: true, backward: false },
223223
customInfo: {
@@ -227,7 +227,7 @@ export const data: any = [
227227
},
228228
},
229229
{
230-
frequencyName: '设备A',
230+
frequencyName: '设备2',
231231
range: [10000000, 500000000], // 100kHz-500kHz
232232
color: '#4299e1',
233233
slashStyle: { forward: true, backward: false },
@@ -238,7 +238,7 @@ export const data: any = [
238238
},
239239
},
240240
{
241-
frequencyName: '设备A',
241+
frequencyName: '设备3',
242242
range: [1000000, 500000000], // 100kHz-500kHz
243243
color: '#4299e1',
244244
slashStyle: { forward: true, backward: true },
@@ -249,7 +249,7 @@ export const data: any = [
249249
},
250250
},
251251
{
252-
frequencyName: '设备A',
252+
frequencyName: '设备4',
253253
range: [1000000, 600000000], // 100kHz-500kHz
254254
color: '#4299e1',
255255
slashStyle: { forward: false, backward: true },

0 commit comments

Comments
 (0)