Geek asks and answers

In d3.js a linear scale / axis with ticks at intervals of 2 ^ (10 * s) instead of 10 ^ s?

I am using d3.js to show network traffic information. At a certain point in the visualization, the y axis is used to display the number of bytes.

I am currently using the d3.svg.axis () system. ticks (), which leads to good rounded numbers, for example, 20,000. When converting to kB / MB / etc, however, the result has uncomfortable numbers such as 19.5 and 9.8, is there a way to return ticks to multiple (2 ^ (10 * c)), e.g. 1024, 1048576, etc. Instead of multiple (10 ^ c)?

Other information / thoughts:

  • I appreciate that svg.axis handles the nuts and bolts of the drawing for me and would like to find a solution that does not replace this functionality.
  • I am open to changing d3 and sending a transfer request if it is jive with @mbostock and company.
  • I checked the repositions, focusing on the code in and around d3_scale_linearTickRange () , I see a simple way to achieve my goals without changing the default functionality that I need for the other axis.
  • There is one potential problem below , which can be addressed, but it borders on dishonest.
+3
source share
2 answers

You can handle the tick values ​​manually as described here: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues([1, 2, 3, 5, 8, 13, 21]);

And you can use tickFormat to help with formatting, that is, to fix precision and SI prefixes. https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format

+2

, - - , 1000 1024, .

Instead of:
20000 B / 1024 = 19.5 kB     :(

Stretch the truth with:
20000 B / 1000 = 20 kB       :)

, , , " ", d3.

, .

+1

More articles:


All Articles