Javascript D3相同的蜱虫在y轴上显示两次

y轴上多次显示相同的刻度值（本例中为1M）。我认为问题不在于如何使用

yAxisTickFormat

格式化记号。我做错了什么

---

相反，问题在于数字格式。您正在传递的

1400000

和

1200000

将转换为1M。通过将参数传递给

.toFixed

方法，尝试在逗号后添加几个数字

export const yAxisTickFormat=（d）=>{
//减少大数字的逻辑
常数限值=[1000000,10000,1000]；
常数短项=['M'，'K'，'K']；
for（让我输入限制）{
如果（d>限制[i]）{
返回（d/限额[i]）至固定（1）+短缩者[i]；
}
}
返回d；
};

---

这将相应地将您的数字转换为1.4m和1.2m。

相反，问题在于数字格式。您正在传递的

1400000

和

1200000

将转换为1M。通过将参数传递给

.toFixed

方法，尝试在逗号后添加几个数字

export const yAxisTickFormat=（d）=>{
//减少大数字的逻辑
常数限值=[1000000,10000,1000]；
常数短项=['M'，'K'，'K']；
for（让我输入限制）{
如果（d>限制[i]）{
返回（d/限额[i]）至固定（1）+短缩者[i]；
}
}
返回d；
};

---

这将相应地将您的数字转换为1.4m和1.2m。

这里有一个更正确的

yAxisTickFormat

（用代码片段测试）：

const yAxisTickFormat=（d）=>{
设极限=数学功率（10,12）；
常数缩短器=[“T”、“B”、“M”、“K”]；
for（设i=0；i=限制）{
常数zeroPad=数学地板（d/极限）==d/极限；
返回'镑'+（d/限制）.toFixed（零键盘？0:1）+''+短路器[i]；
}
限额/=1000；
}
返回d；
};
const svg=d3.select（'svg'）；
常数范围=[500020000000004000000000350000000000]；
范围。forEach（（范围，索引）=>{
const yScale=d3.scaleLinear（）.domain（[range，0]）.range（[0300]）；
常数yAxis=d3
.左
.刻度（yScale）
.tickFormat（（d）=>yAxisTickFormat（d））
.蜱（10）；
append（'g'）.attr（'transform'，'translate（${50+index*100}，50）`）.call（yAxis）；
})

---

这里有一个更正确的

yAxisTickFormat

（用代码片段测试）：

const yAxisTickFormat=（d）=>{
设极限=数学功率（10,12）；
常数缩短器=[“T”、“B”、“M”、“K”]；
for（设i=0；i=限制）{
常数zeroPad=数学地板（d/极限）==d/极限；
返回'镑'+（d/限制）.toFixed（零键盘？0:1）+''+短路器[i]；
}
限额/=1000；
}
返回d；
};
const svg=d3.select（'svg'）；
常数范围=[500020000000004000000000350000000000]；
范围。forEach（（范围，索引）=>{
const yScale=d3.scaleLinear（）.domain（[range，0]）.range（[0300]）；
常数yAxis=d3
.左
.刻度（yScale）
.tickFormat（（d）=>yAxisTickFormat（d））
.蜱（10）；
append（'g'）.attr（'transform'，'translate（${50+index*100}，50）`）.call（yAxis）；
})

在这种情况下，低位数字没有前置符号。在这种情况下，低位数字没有前置符号

export const yAxisTickFormat = (d) => {
  //Logic to reduce big numbers
  const limits = [1000000, 10000, 1000];
  const shorteners = ['M', 'K', 'K'];
  for (let i in limits) {
    if (d > limits[i]) {
      return (d / limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

const maxValue = storeData.dataset.reduce((maxAll, item) => {
  return item.values.reduce((maxItem, val) => 
    Math.max(maxItem, val.value), maxAll);
}, 0);
    
const yScale = d3.scaleLinear().range([-120, height - 200]);

yScale.domain([maxValue, 0]);

 const yAxis = d3
  .axisLeft()
  .scale(yScale)
  .tickFormat((d) => (d === 0 ? null : '£') + yAxisTickFormat(d))
  .ticks(5)
  .tickSize(-width, barMargin, 0)
  .tickPadding(10);