1

I am building a graph with d3, sometimes the graph has smaller numbers on the axis and sometimes the graph has larger numbers on the axis. This causes the following problem from time to time;

enter image description here

Notice how at the left and right hand side the svg element is done and such the entire legend doesnt get displayed. I would prefer not to play around with increasing the margins on either side because that would decrease the screen real estate.

Is there a way such that the axis are responsive with regards to the data input? Ie; when the numbers are in the thousands then a 'k' or an 'm' is added to the number ( 100000 -> 100K, 12000000 -> 12M ).

cantdutchthis
  • 31,949
  • 17
  • 74
  • 114
  • why not create a rounding function with an if statement something like function rounder (x) { if (x<1000000) { d3.format(.0r) } else { d3.format(.2s) };. Note I haven't tested this. btw there is the s type in the format function which rounds with unit suffixed like you want [(see this)](https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format). – user1614080 Oct 09 '13 at 09:10

1 Answers1

2

The function axis.tickFormat() allows you to do exactly that. The formats are described in the documentation for d3.format(). In your case, you need to specify something like

axis.tickFormat(d3.format("s"));
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204