D3 过渡未按预期工作

Question

我希望 D3 图表上的条柱从底部开始增长。我知道我需要在过渡前将高度设置为零并将 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");

Answer 1

好吧，我刚刚和 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)。经过审查，我不得不同意，所以我不会追求这个动画作为我可视化的审美属性。

D3 过渡未按预期工作

D3 transition not working as intended

javascript

d3.js

leaflet