如何在 D3.js 上每 1.5 显示刻度？

Question

我正在学习 D3.js 制作一些图表，但我对轴上显示的值有疑问。

我试过这个：

        var width = 400, height = 400; 
        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", width) 
            .attr("height", height); 
  
        var xscale = d3.scaleLinear() 
            .domain([0.0, 17.0]) 
            .range([0, width]); 

        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]); 
  
        svg.append("g") 
            .attr("transform", `translate(100, ${height - 20})`) 
            .call(x_axis);

但它只显示整数刻度。

result axis

任何帮助将不胜感激

Answer 1

屏幕上的值是正确的，但刻度的标签不正确。修复添加 tickFormat 以覆盖默认标签

.tickFormat(t => t)

如何在 D3.js 上每 1.5 显示刻度？

How to show ticks each 1.5 on D3.js?

javascript

d3.js