How to show ticks each 1.5 on D3.js?


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

Source: JavaSript – Stack Overflow

November 22, 2021
Category : News
Tags: D3.js | javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.