score:2

Accepted answer

There is a built in log-scale in d3, but some more modifications are needed. The first thing you need to do is change your xScale to be logarithmic:

xScale = d3.scale.log()
        .domain([0.5, xMax])//The x-min can not be 0!
        .range([0, width]),

Note that xmin is 0.5 instead of 0. Because 0 can not exist in a logarithmic scale. And putting anything larger than 1 would make the Series #1 of august not visable since it is 1.

The second thing you need is to calculate the width in a different way since your scale is not linear anymore, i.e. 10->20 is wider than 110->120:

.attr('width', function (d) {
        return xScale(d.x0+d.x)- (d.x0==0 ? 0 : xScale(d.x0));
    })

This simply takes the position of the end-point (d.x0+d.x) and subtract the position of the startpoint d.x0. Not that if d.x0 == 0, 0 is used as start-pos since 0 do not exist in xScale

And finaly, default is to show ticks as 1e+02 for example, so change the format for the tick by

xAxis = d3.svg.axis()
    .scale(xScale)
    .orient('bottom')
    .ticks(0, '.1s'),

See jsfiddle


Related Query

More Query from same tag