我希望 D3 图表上的柱形图从底部开始增长。我知道我需要在过渡之前将高度设置为零,将 y 设置为高度才能获得该效果。
但是,当单击 map 后绘制图表时,它首先加载向上生长的条形图,然后从上到下绘制任何其他图表。我可以在下面的示例中重现这一点:第一次单击时会正确绘制图表,之后的任何其他单击都会从上到下绘制图表。
据我所知,我的编码是正确的,因为第一次单击时,条形图是从底部绘制的。我无法解释为什么在所有后续点击中,图表都是从顶部绘制的。
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 )。 经过审核后,我必须同意,所以我不会追求这个动画作为我的可视化的美学属性。
关于javascript - D3 转换未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34117365/