converting numbers on y axis to string with K for thousand d3.js

问题:

i am using d3.js charts to plot y axis and x axis .. its working fine ... but the values in y axis you can say range is say 0 to 10000 and i want if the number is greater than thousand it will come with K say if the number is 1000 it will show 1K, for 15000 it will show on y axis ticks 15K

how to do that .. i am not able to manupulate y.domain and range functions for the string values ...

var y = d3.scale.linear().range([ height, 0 ]); y.domain([0,                                   //d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.count; }); }),                                   d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.count; }); })                                 ]);

how to do that is there any way to do ... please help

回答1:

From API Reference, we see d3.formatPrefix

var prefix = d3.formatPrefix(1.21e9); console.log(prefix.symbol); // "G" console.log(prefix.scale(1.21e9)); // 1.21

We can use it this way

var yAxis = d3.svg.axis()     .scale(y)     .ticks(5)     .tickFormat(function (d) {         var prefix = d3.formatPrefix(d);         return prefix.scale(d) + prefix.symbol;     })     .orient("left");

However, in case this is exactly what you mean, we can simplify using d3.format("s")

var yAxis = d3.svg.axis()     .scale(y)     .ticks(5)     .tickFormat(d3.format("s"))     .orient("left");

回答2:

You're looking for tickFormat on the axis object.

var svgContainer = d3.select("body").append("svg")     .attr("width", 800)     .attr("height", 100);  //Create the Scale we will use for the Axis var axisScale = d3.scale.linear()     .domain([0, 2000])     .range([0, 600]);  //Create the Axis var xAxis = d3.svg.axis()     .scale(axisScale)     .tickFormat(function (d) {       if ((d / 1000) >= 1) {         d = d / 1000 + "K";       }       return d;     });  var xAxisGroup = svgContainer.append("g")     .call(xAxis);

Check it here: http://jsfiddle.net/3CmV6/2/

This will give you what you want, but I recommend checking the suggestion from robermorales to use d3.format('s') .

回答3:

This is what i implemented

var yAxis = d3.svg.axis().scale(y).ticks(5). tickFormat(function (d) {     var array = ['','k','M','G','T','P'];     var i=0;     while (d > 1000)     {         i++;         d = d/1000;     }      d = d+' '+array[i];      return d;}). orient("left");

it will work for even more than thousand ...

回答4:

If you wish to edit the labels on the ticks you can use the tickFormat function.

For example, your y axis function would look something like this:

var yAxis = d3.svg.axis()     .scale(y)     .orient("left")     .tickFormat(function(tickVal) {         return tickVal >= 1000 ? tickVal/1000 + "K" : tickVal;     });

Then you just have to call it. Assuming you have a variable called svg that references your svg chart:

svg.append("g)     .call(yAxis);

To make things a little clearer I've created this jsfiddle based on this tutorial, adapted to display axis tick labels in the way you describe above if the value is greater than or equal to 1000. If you run it a few times you will see how different axis values are handled.

转载请标明出处:converting numbers on y axis to string with K for thousand d3.js

文章来源: converting numbers on y axis to string with K for thousand d3.js