user2385109
user2385109

Reputation: 13

Grouped Bar Chart with negative value d3

first time asking here.

I would like to modify this code here https://gist.github.com/mbostock/3887051 so that it will show negative values.

I have only managed to get the y axis to show correct negative values by changing this line

y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

to be:

y.domain([ d3.min(data, function(d) { return d3.min(d.ages, function(d) { return d.value; }); }), d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

But that only takes care of the y axis, I cant get anything to change on the x axis.

I have looked everywhere online - but there's only stacked bar chart with negative, not grouped bar chart with negative.

Please kindly help. Thank you very much in advance!

Upvotes: 0

Views: 2700

Answers (2)

slobodan.blazeski
slobodan.blazeski

Reputation: 1040

Your sample data you gave us doesn't contain negative values, here's a fiddle with some random data with negative values http://jsfiddle.net/srG6A/ take notice of this part:

// if 0 is not between min & max I put x-axis on the bottom
var xAxisTransform =  height; 
    if(d3Min < 0 && 0 < d3Max) {
        xAxisTransform = height * (d3Max / (d3Max -d3Min));
    }
  svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(0," + xAxisTransform + ")") // this line moves x-axis
            .call(xAxis);

Upvotes: 3

slobodan.blazeski
slobodan.blazeski

Reputation: 1040

I don't see what the negative value of state would mean, how about moving the y axis to create illusion of negative values

svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate("+width/2+",0)")   // added line
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Population");

Upvotes: 1

Related Questions