score:37

Accepted answer

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

score:0

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.

score:1

A concise approach:

var myTickFormat = function (d) {//Logic to reduce big numbers
  var limits = [1000000000000000, 1000000000000, 1000000000, 1000000, 1000];
  var shorteners = ['Q','T','B','M','K'];
  for(var i in limits) {
    if(d > limits[i]) {
      return (d/limits[i]).toFixed() + shorteners[i];
    }
  }
  return d;
};

spenderRowChart
    .xAxis().ticks(3)
    .tickFormat(myTickFormat);

This returns 1K for 1000, 1M for 1,000,000, and so on.
Note: Beyond quadrillion, you may wanna go through Number.MAX_SAFE_INTEGER.

score:1

Try this

      axis: {
                y: {
                    tick: {
                        format: d3.format("$.2s")
                    }
                }
            }

score:7

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 ...

score:9

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') .


Related Query

More Query from same tag