d3.js條形圖動畫

Question

我工作的這個柱狀圖中的應用。

http://jsfiddle.net/NYEaX/166/

如何讓他們從底部 b成長我

一）動畫條）相應變形的軸旋轉到新的數據集

animateBars: function(data){ 

         var svg = d3.select(methods.el["selector"] + " .barchart"); 
         var barrects = d3.select(methods.el["selector"] + " .barrects"); 


         var initialHeight = 0;  



         var bar = barrects.selectAll("rect") 
          .data(data); 

         // Enter 
         bar.enter() 
          .append("rect") 
          .attr("class", "bar") 
          .attr("y", initialHeight); 

         // Update 
         bar 
          .attr("height", initialHeight) 
          .transition() 
          .duration(500) 
          .attr("x", function(d) { return methods.x(d.letter); }) 
          .attr("width", methods.x.rangeBand()) 
          .attr("y", function(d) { return methods.y(d.frequency); }) 
          .attr("height", function(d) { return methods.height - methods.y(d.frequency); }) 

         // Exit 
         bar.exit() 
          .transition() 
          .duration(250) 
          .attr("y", initialHeight) 
          .attr("height", initialHeight) 
          .remove(); 



        }, 

Answer 1

對於前者，設置y屬性是最大高度，而不是0：

.attr("y", methods.height) 

對於後者，重新計算x域和再次調用軸分量：

methods.x.domain(data.map(function(d) { return d.letter; })); 
svg.select("g.x").call(methods.xAxis); 

完整示例here。