javascript - D3过渡无法正常工作

我希望D3图表上的条形从底部开始增长。我知道我需要在过渡之前将height设置为零，将y设置为高度才能获得该效果。

但是，单击地图后绘制图表时，首先加载的是条形向上增长，然后再从上到下绘制其他图表。我可以在下面的示例中重现该图表：第一次单击时正确绘制了图表，之后单击任何其他单击，则从上到下绘制了图表。

就我所知，我已正确编码，因为在第一次单击时，条是从底部绘制的。我无法解释为什么在随后的所有单击中，图表都是从顶部绘制的。

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

点击转换：

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); });
});

过渡前：

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

最佳答案

好吧，我刚刚与Mike Bostock聊天，他指出了问题所在。在完整的代码中，还有一个popupclose事件：

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

该代码仅将宽度重置为0，但也需要将Y重置为高度。因此，此代码解决了这个问题：

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

另外，麦克给了我非常深刻的反馈。他不建议像我在这里那样使用过渡。他说这会引起分心和延误，而且没有提供信息。在数据集之间切换时最好保持过渡（Object constancy）。
复习后，我必须同意，因此我将不会将此动画视为可视化效果的美学特性。