d3.js格式轴统一以百万计

Question

I found this thread and it got me halfway to where I need to be and I'm wondering if anyone knows how I can adjust the solution to fit my needs.

So if I have some values in the thousands, and some values in the millions, does anyone know how I can set all of the ticks to be formatted in the millions? For instance, if I have a value for 800k it would show up as 0.8million instead.

This is what I get when using the above solution without adjusting it.

Answer 1

You don't need to use a SI prefix in this case. Given this domain:

var scale = d3.scaleLinear().domain([200000,1800000])

Going from 200 thousand to 1.8 million, you can simply divide the tick value by 1,000,000 and add a "million" string.

Here is the demo:

 var svg = d3.select("body") .append("svg") .attr("width", 600) .attr("height", 100); var scale = d3.scaleLinear().domain([200000,1800000]).range([20,550]); var axis = d3.axisBottom(scale).tickFormat(function(d){return d/1000000 + " Million"}); var gX = svg.append("g").attr("transform", "translate(20, 50)").call(axis); 

 <script src="https://d3js.org/d3.v4.min.js"></script> 

EDIT : According to the comments, you want to show "million" only in the last tick. Thus, we have to check if the tick is the last one and conditionally formatting it:

var axis = d3.axisBottom(scale).tickFormat(function(d){
    if(this.parentNode.nextSibling){
        return d/1000000;
    } else { 
        return d/1000000 + " Million";
    }
});

Here is the demo:

 var svg = d3.select("body") .append("svg") .attr("width", 600) .attr("height", 100); var scale = d3.scaleLinear().domain([200000,1800000]).range([20,550]); var axis = d3.axisBottom(scale).tickFormat(function(d){ if(this.parentNode.nextSibling){ return d/1000000} else { return d/1000000 + " Million"}}); var gX = svg.append("g").attr("transform", "translate(20, 50)").call(axis); 

 <script src="https://d3js.org/d3.v4.min.js"></script>