Skip to content

Commit

Permalink
style: frequency file style
Browse files Browse the repository at this point in the history
  • Loading branch information
@JerryHub-dev
JerryHub-dev committed Dec 28, 2024
1 parent 496072f commit 2a19d7b
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 122 deletions.
Binary file modified src/pages/Feature/.DS_Store
View file
Binary file not shown.
57 changes: 25 additions & 32 deletions src/pages/Feature/D3/DataDemo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,28 +518,17 @@ const Frequency = () => {
});

// 映射频率到刻度位置
// const getXPosition = (hz: any) => {
// const label: any = labelMap.get(
// frequencyTicks.reduce((prev: any, curr: any) =>
// Math.abs(curr.value - hz) < Math.abs(prev.value - hz) ? curr : prev,
// ).value,
// );
// return xScale(label);
// };

// 映射频率到位置的函数
const getFrequencyPosition = (hz: number) => {
// 找到对应的刻度标签
const nearestTick = frequencyTicks.find((tick: any) => tick.value === hz);
if (nearestTick) {
// 如果频率值正好对应某个刻度，直接返回刻度位置
return xScale(nearestTick.label);
const getXPosition = (hz: number) => {
// 处理边界情况
if (hz <= frequencyTicks[0].value) {
return xScale(frequencyTicks[0].label);
}
if (hz >= frequencyTicks[frequencyTicks.length - 1].value) {
return xScale(frequencyTicks[frequencyTicks.length - 1].label);
}

// 找到最接近的两个刻度点
let leftTick = frequencyTicks[0];
let rightTick = frequencyTicks[1];

// 找到包含该频率值的刻度区间
let leftTick, rightTick;
for (let i = 0; i < frequencyTicks.length - 1; i++) {
if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
leftTick = frequencyTicks[i];
Expand All @@ -548,26 +537,30 @@ const Frequency = () => {
}
}

// 获取两个刻度点的位置
// 如果找不到适合的区间（这种情况不应该发生，但我们需要处理）
if (!leftTick || !rightTick) {
console.warn('无法为频率值找到合适的区间:', formatFrequency(hz));
return null;
}

// 获取刻度点的位置
const leftPos = xScale(leftTick.label);
const rightPos = xScale(rightTick.label);

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

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

// 绘制频率块
typeData.ranges.forEach((freq: any, i: any) => {
// const startX = getXPosition(freq.range[0]);
// const endX = getXPosition(freq.range[1]);
const startX = getFrequencyPosition(freq.range[0]);
const endX = getFrequencyPosition(freq.range[1]);
const startX = getXPosition(freq.range[0]);
const endX = getXPosition(freq.range[1]);
const blockHeight = 25; // 频率块高度
const yOffset = 35 + freq.level * (blockHeight + 5); // 计算频率块的垂直位置

Expand Down
81 changes: 0 additions & 81 deletions src/pages/Feature/D3/Frequency.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,85 +518,6 @@ const Frequency = () => {
});

// 映射频率到刻度位置
// const getXPosition = (hz: any) => {
// const label: any = labelMap.get(
// frequencyTicks.reduce((prev: any, curr: any) =>
// Math.abs(curr.value - hz) < Math.abs(prev.value - hz) ? curr : prev,
// ).value,
// );
// return xScale(label);
// };

// 映射频率到位置的函数
// const getFrequencyPosition = (hz: number) => {
// // 找到对应的刻度标签
// const nearestTick = frequencyTicks.find((tick: any) => tick.value === hz);
// if (nearestTick) {
// // 如果频率值正好对应某个刻度，直接返回刻度位置
// return xScale(nearestTick.label);
// }

// // 找到最接近的两个刻度点
// let leftTick = frequencyTicks[0];
// let rightTick = frequencyTicks[1];

// for (let i = 0; i < frequencyTicks.length - 1; i++) {
// if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
// leftTick = frequencyTicks[i];
// rightTick = frequencyTicks[i + 1];
// break;
// }
// }

// // 获取两个刻度点的位置
// const leftPos = xScale(leftTick.label);
// const rightPos = xScale(rightTick.label);

// // 如果找不到合适的区间，返回 0 或最大值
// if (!leftPos || !rightPos) {
// return hz <= leftTick.value
// ? xScale(frequencyTicks[0].label)
// : xScale(frequencyTicks[frequencyTicks.length - 1].label);
// }

// return leftPos;
// };

// 改进频率到位置的映射函数
// const getXPosition = (hz: number) => {
// // 1. 首先找到包含这个频率值的刻度区间
// let leftTick, rightTick;

// // 处理边界情况
// if (hz <= frequencyTicks[0].value) {
// return xScale(frequencyTicks[0].label);
// }
// if (hz >= frequencyTicks[frequencyTicks.length - 1].value) {
// return xScale(frequencyTicks[frequencyTicks.length - 1].label);
// }

// // 找到频率值所在的刻度区间
// for (let i = 0; i < frequencyTicks.length - 1; i++) {
// if (hz >= frequencyTicks[i].value && hz <= frequencyTicks[i + 1].value) {
// leftTick = frequencyTicks[i];
// rightTick = frequencyTicks[i + 1];
// break;
// }
// }

// // 2. 计算在区间内的精确位置
// const leftX = xScale(leftTick.label);
// const rightX = xScale(rightTick.label);

// // 3. 使用对数比例计算位置
// // 因为频率是对数性质的，所以在计算区间内的相对位置时应该使用对数插值
// const logProgress =
// (Math.log(hz) - Math.log(leftTick.value)) / (Math.log(rightTick.value) - Math.log(leftTick.value));

// // 返回插值计算的位置
// return leftX + (rightX - leftX) * logProgress;
// };

const getXPosition = (hz: number) => {
// 处理边界情况
if (hz <= frequencyTicks[0].value) {
Expand Down Expand Up @@ -640,8 +561,6 @@ const Frequency = () => {
typeData.ranges.forEach((freq: any, i: any) => {
const startX = getXPosition(freq.range[0]);
const endX = getXPosition(freq.range[1]);
// const startX = getFrequencyPosition(freq.range[0]);
// const endX = getFrequencyPosition(freq.range[1]);
const blockHeight = 25; // 频率块高度
const yOffset = 35 + freq.level * (blockHeight + 5); // 计算频率块的垂直位置

Expand Down
18 changes: 9 additions & 9 deletions src/pages/Feature/D3/components/DataUnit.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,8 +189,8 @@ export const data: any = [
typeName: '无线设备3',
ranges: [
{
frequencyName: '设备A',
range: [100000, 500000], // 100kHz-500kHz
frequencyName: '设备1',
range: [100000, 5000000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: true, backward: false },
customInfo: {
Expand All @@ -200,8 +200,8 @@ export const data: any = [
},
},
{
frequencyName: '设备A',
range: [100000, 500000], // 100kHz-500kHz
frequencyName: '设备2',
range: [10000000, 5000000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: true, backward: false },
customInfo: {
Expand All @@ -216,8 +216,8 @@ export const data: any = [
typeName: '无线设备4',
ranges: [
{
frequencyName: '设备A',
range: [100000, 500000], // 100kHz-500kHz
frequencyName: '设备1',
range: [1000000, 50000000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: true, backward: false },
customInfo: {
Expand All @@ -227,7 +227,7 @@ export const data: any = [
},
},
{
frequencyName: '设备A',
frequencyName: '设备2',
range: [10000000, 500000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: true, backward: false },
Expand All @@ -238,7 +238,7 @@ export const data: any = [
},
},
{
frequencyName: '设备A',
frequencyName: '设备3',
range: [1000000, 500000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: true, backward: true },
Expand All @@ -249,7 +249,7 @@ export const data: any = [
},
},
{
frequencyName: '设备A',
frequencyName: '设备4',
range: [1000000, 600000000], // 100kHz-500kHz
color: '#4299e1',
slashStyle: { forward: false, backward: true },
Expand Down

0 comments on commit 2a19d7b

Please sign in to comment.