使用 tickFormat d3 重复 y 轴值

【问题标题】：repeated y axis values with tickFormat d3使用 tickFormat d3 重复 y 轴值
【发布时间】：2021-11-24 17:48:14
【问题描述】：

我用 tickFormat d3.format('.1s') 得到重复的 y 轴值，就像实际数字不同，就像它是 [6045678, 6223456, 6076887] 的数组，但是当您格式化数字时，您将获得 6M 3 次，

什么是这个问题的最佳解决方案，是否有任何 d3 函数可以解决这个问题，或者我们是否必须创建一个值数组。

let yAxisValues = [6045678, 6223456, 6076887];
const yScale = d3.scaleLinear()
       .domain([d3.min(yAxisValues), d3.max(yAxisValues)])
       .range([height, 0])
       .nice();

let yAxis = d3.axisLeft(yScale)
       .tickPadding(7)
       .ticks(5)
       .tickFormat(d3.format(".1s"))

【问题讨论】：

标签： javascript d3.js charts

【解决方案1】：

尝试在d3.format(".1s") 中将precision 编号从1 更改为2/3/4 等等，以获得适合您的。

let yAxisValues = [6045678, 6223456, 6076887];
let formatter = d3.format(".1s");
let formatter2 = d3.format(".2s");
let formatter3 = d3.format(".3s");
let formatter4 = d3.format(".4s");

yAxisValues.forEach((d) => console.log(formatter(d)));
yAxisValues.forEach((d) => console.log(formatter2(d)));
yAxisValues.forEach((d) => console.log(formatter3(d)));
yAxisValues.forEach((d) => console.log(formatter4(d)));

上面的代码输出如下。 6M 3次是你得到的，剩下的是在更改precision之后。

【讨论】：