如何動畫水平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/