Use d3 log scale instead of linear scale

Question

I'm trying to do a chart based on http://mbostock.github.com/d3/talk/20111116/bar-hierarchy.html, the only difference being that I'd like to use a log scale for the x-axis.

Here's my fiddle: http://jsfiddle.net/JhDVC/5/

As you can see, the x-axis is defined at line 4:

x = d3.scale.linear().range([0, w]),

If I change it for

x = d3.scale.log().range([0, w]),

Then it doesn't work (nothing is rendered), throwing these error messages:

Error: Invalid value for <rect> attribute width="NaN" 

Changing the domain setting from

x.domain([0, root.value]).nice();

to

x.domain([1, root.value]).nice();

shows me the z axis (names) but still no bars or values.

Solution 1

There are a few other places where the domain for the scale is set. You need to update those as well.

Working jsfiddle here.

And here's some code so that it allows me to post this:

x.domain([1, root.value]).nice();

Solution 2

Your range includes zero - log(0) is undefined.

Comments

[eMPee584]

… simple to forget when just trying to switch a linear axis scale to logarithmic 👌😅