CODEWITHSUNDEEP
javascriptjqueryd3.js
Nightfox
Nightfox

Reputation: 488

d3 js bidirectional horizontal bar chart

I am trying to plot a horizontal bi-directional bar chart using d3. I have got a sample from the fiddle. I have updated it as I need. But I end up with some issues.

Please find the fiddle here: https://jsfiddle.net/binuabraham/9c3rsrk6/1/

I need that ticks from 6 - 30 there in my graph all the time. But when I change the values the x-axis breaks:

var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(d3.range(6, 31, 2));

Also the gap between ticks changing as per the value changes. Can anybody help me with it?

Upvotes: 1

Views: 667

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

The problem is you first set the x domain as 

var x = d3.scale.linear()
        .domain([6, 30])

from 6 to 30

then later you set domain like this depending on the data

x.domain(d3.extent(data, function (d) {
                return d.value;
            })).nice();

So the fix is do one of the above once.

And remove the tick values .tickValues(d3.range(6, 31, 2)); you cannot set the tick value 31 since your data has max till 26.

working code here

EDIT

If you always want the domain to be 6 to 30 then add:

var x = d3.scale.linear()
            .domain([6, 30])

and remove this line below:

x.domain(d3.extent(data, function (d) {
                return d.value;
            })).nice();

working code here

Upvotes: 1

Related Questions