我目前正在使用这个D3条形图:http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306我想简单地在页面加载上动画图表,从左到右填充。我已经看到了。transform的其他片段,但似乎无法理解如何正确地将动画添加到我的图表中。有人介意看一下吗?每当我在本地进行更改时(我基本上在我的web应用程序中安装了相同的图表),图表完全消失,看起来我在某处有语法错误。
对于从左到右的过渡,您只需要将初始宽度设置为0,并将transition()
后的值设置为最终值:
bar.append("rect")
.attr("transform", "translate("+labelWidth+", 0)")
.attr("height", barHeight)
.attr("width", 0)//this is the initial value
.transition()
.duration(1500)//time in ms
.attr("width", function(d){
return scale(d.value);
});//now, the final value
小提琴在这里:https://jsfiddle.net/8v88gwqn/
同样,您可以使用延迟来分别转换每个栏:
bar.append("rect")
.attr("transform", "translate("+labelWidth+", 0)")
.attr("height", barHeight)
.attr("width", 0)
.transition()
.duration(1500)
.delay(function(d,i){ return i*250})//a different delay for each bar
.attr("width", function(d){
return scale(d.value);
});
下面是延迟的操作:https://jsfiddle.net/8v88gwqn/1/