Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get numeric values instead of Logarthmic values in D3 axis scale?

I tried the following code,

d3.scale.log().domain([1,4]).range([h, 0]);

In the axis I'm getting values as 1e+0, 2e+0, 3e+0, 4e+0 in the axis value. But I need the lograthmic values such as 10, 100, 1000, 10000 ..etc....

like image 938
Rajaa Avatar asked Apr 25 '13 09:04

Rajaa


1 Answers

Use the log.scale's tickFormat in conjunction with the axis tickFormat function.

eg. set up 1 -> 10000 log scale:

var s = d3.scale.log().domain([1, 10000]).range([1000, 0])

then, set up the axis:

var axis = d3.svg.axis().scale(s).tickFormat(function (d) {
        return s.tickFormat(4,d3.format(",d"))(d)
})

example

http://jsfiddle.net/2hvxc/

We want 4 ticks - one for each power of 10 - and formatted with a comma to a digit.

Learn more about formatting here:
https://github.com/mbostock/d3/wiki/Formatting

Learn more about log scales here:
https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-log

And axis:
https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickSize

like image 197
minikomi Avatar answered Nov 16 '22 02:11

minikomi