如何为d3轴添加浮点刻度？刻度数值总是被四舍五入怎么办

问题原因 #

d3的.ticks()方法的核心逻辑是优先生成间隔规整、可读性高的刻度值，不会严格遵守你传入的刻度数量，也不会默认强制包含domain的两个边界值。你当前的代码中d3计算出来的刻度起始值是3而非2.8，所以即使你设置了保留1位小数的格式，显示的也是3.0而不是你期望的2.8。

解决方案 #

直接使用.tickValues()方法手动指定你需要显示的刻度值，就能强制显示2.8作为第一个刻度：

const key = d3.scaleLinear() 
    .domain([2.8, 12.8])
    .range([0, 300]);

// 手动生成刻度：从2.8开始，步长为1，到12.8结束
const customTicks = d3.range(2.8, 12.9, 1);

svg.append('g')
    .attr('transform', 'translate(150, 638)')
    .call(d3.axisBottom(key)
    .tickValues(customTicks) // 替换原来的.ticks(10)
    .tickFormat(d3.format('.1f')));

如果你需要刚好10个刻度，也可以调整d3.range的步长参数，把步长设为(12.8-2.8)/9 ≈ 1.111，就能生成刚好10个均匀分布的刻度。

内容的提问来源于stack exchange，提问作者truongmleon