Javascript D3转换未按预期工作

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

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

据我所知，我的编码是正确的，因为第一次单击时，条形图是从底部绘制的。我无法解释为什么在接下来的所有点击中，图表都是从顶部绘制的

JSfiddle：

点击转换：

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

---

我刚刚和迈克·博斯托克聊了一会儿，他指出了问题所在。在完整代码中，还有一个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; });
});

作为额外的奖励，迈克给了我非常深刻的反馈。他不建议像我这里那样使用过渡。他说这会让人分心和耽搁，而且信息量不大。在数据集之间切换时，最好保持转换（）。

---

在回顾之后，我必须同意，因此我不会将此动画作为我的视觉化的美学属性来追求。

我认为您的JSFIDLE链接是错误的，因为它指向地图。同时，看看这是否对您有帮助：我忘了将上次更新设置为base。完成！