如何在D3.js中设置坐标轴每间隔1.5显示一个刻度

你遇到的问题是D3.js的坐标轴组件默认自带了刻度格式化逻辑，未手动指定格式时，会自动将小数刻度转换为整数显示，哪怕你已经通过tickValues指定了带小数的刻度值也会被默认格式化逻辑覆盖。

可行解决方案 #

方案1：固定保留1位小数显示所有刻度 #

在axisBottom的链式调用中新增tickFormat配置，使用d3内置的格式化方法指定保留1位小数即可，修改后的x轴定义代码如下：

var x_axis = d3.axisBottom(xscale)
.tickValues([0.0, 1.5, 3.0, 4.5, 6.0, 7.5, 9.0, 10.5, 12.0, 13.5, 15.0, 16.5])
// 新增此行指定刻度格式
.tickFormat(d3.format(".1f"));

方案2：智能显示格式（整数显示整数，小数显示1位小数） #

如果不希望整数刻度后面带.0的冗余显示，可以自定义格式化函数实现适配：

var x_axis = d3.axisBottom(xscale)
.tickValues([0.0, 1.5, 3.0, 4.5, 6.0, 7.5, 9.0, 10.5, 12.0, 13.5, 15.0, 16.5])
.tickFormat(d => Number.isInteger(d) ? d : d.toFixed(1));

两种方案都可以解决你当前只显示整数刻度的问题，可按需选择。

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