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

Question

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

Tarnetgaronne

Answer 1

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

Chifforobe