如何动画水平D3条形图？

Question

我目前正在使用此D3条形图：http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306我想简单地在页面加载时为图表制作动画，以便从左至右填充。我已经看过其他的.transform片段，但似乎无法理解如何正确地将动画添加到我的图表。任何人都介意看看？每当我在本地进行更改（我的Web应用程序中安装了基本相同的图表），图表完全消失，看起来我在某处出现语法错误。

Answer 1

对于从左至右过渡，你只需要初始宽度设为零和，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/