D3.js - show large numbers on the axis in abbreviated form

Question

Is there a way to reduce large numbers on the d3.js axis? I remember how I found a way to help on the Internet, but I can not find it again. I would like to reduce large numbers in order to reduce the margins of the chart and make them easier to read.

i.e. 1,000,000 = 1M etc.

If someone can post a reference to the d3.js helper class, this will be appreciated.

Answer 1

Check out this link https://bl.ocks.org/mbostock/9764126

This worked for me for d3 v4:

function make_y_gridlines() { return d3.axisLeft(yScale) .ticks(10,"s") } 

Answer 2

Hi, this link: http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e . Maybe this can help you.

For an axis, you can use the following.

 chart.yAxis().ticks(5).tickFormat(d3.format("s")); 

I used dc.js and d3.js

Hope this helps you.