Initialise y
to the x axis position (i.e. height
) for this:
control.selectAll("rect")
.data(function(d) { return d.category; })
.enter().append("rect")
.attr("height", 0)
.attr("y", height);
Question
I am new in d3 and I am trying to draw animated bar chart (following this example). I was able to generate the chart but the problem I am facing is that the motion is upside down (start from height of the bar builds the bar towards the x-axis). I want the motion starts from the x-axis and go up!
This is my code
var y0 = d3.scale.linear().range([height, 0]);
var y1 = d3.scale.linear().range([height, 0]);
..
..
control.selectAll("rect")
.data(function(d) { return d.category; })
.enter().append("rect")
.attr("width", x1.rangeBand())
.attr("x", function(d) { return x1(d.name); })
.attr("height", 0)
.attr("y", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.style("fill", function(d) { return color(d.name); });
control.selectAll("rect")
.transition()
.delay(function(d, i) { return i * 100; })
.duration(1000)
.attr("height", function(d, i) { if(columnNum == 2 && i == 2) return y1(d.value); else return y0(d.value); })
.attr("y", function(d, i) { if(columnNum == 2 && i == 2) return height - y1(d.value); else return height - y0(d.value); });
columnNum is just an indicator to number of columns per group.
Thanks for all the help.
Solution
Initialise y
to the x axis position (i.e. height
) for this:
control.selectAll("rect")
.data(function(d) { return d.category; })
.enter().append("rect")
.attr("height", 0)
.attr("y", height);