D3过渡无法正常工作

Question

I want bars on D3 charts to grow from the bottom. I know I need to set the height to zero and the y to height before the transition to get that effect.

However, when the chart is drawn after a click on a map, it first loads with the bars growing upwards but any other charts are then drawn from the top to bottom. I can reproduce this in the example below: the chart is drawn correctly on the first click, on any other click after, the chart is drawn from the top to bottom.

To my knowledge, I have coded it right because on first click, the bars are drawn from the bottom. I cant explain why on all following clicks, the chart is drawn from the top.

JSfiddle: http://jsfiddle.net/Monduiz/44javxww/

Transition on click:

map.on('popupopen', function(e) {
    rects.transition()
    .delay(function (d,i){ return i * 80;})
    .duration(350)
    .attr("height", function(d) {return height - y(d.value);})
    .attr("y", function(d) {return y(d.value); });
});

Before transition:

var rects = bar.append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) {return height; })
    .attr("height", 0)
    .attr("fill", "#1f78b4");

Answer 1

Well, I just had a chat with Mike Bostock and he pointed out what the issue is. In the full code, there is also a popupclose event:

map.on('popupclose', function(e) {
    rects
    .attr("width", 0);
});

This code is only resetting width to 0 but Y needs to be reset to height as well. So, this code is fixing the issue:

map.on('popupclose', function(e) {
    rects
    .attr("width", 0)
    .attr("y", function(d) {return height; });
});

As an added bonus, Mike gave me very insightful feedback. He doesn't recommend using transition the way I have here. he says it introduces distraction and delay and its not informative. It would be best to keep transitions for when switching between datasets ( Object constancy ). After review, I have to agree so I will not pursue this animation as an aesthetic property of my visualizations.