Reputation: 13
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
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
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