I'm learning D3.js to make some graphs and I have issues with the values shown on an axis.

I tried with this:

        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);

But It only shows integer ticks.

result axis

Any help will be appreciated

CodePudding user response：

the values are correct on your screen, but the labels of the ticks arent. to fix that add tickFormat to override the default labels

.tickFormat(t => t)