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。