d3.js堆积图动画

Question

我正在开发堆积图应用程序。

http://jsfiddle.net/NYEaX/174/

我把它放在一个jQuery插件内创建多个实例等等不同的属性，并最终不同的数据源。

现在我遇到了动画图表栏和轴的问题。

动画条码

animateBars: function(selector, data){ 

         var w = $(selector).data("width"); 
         var h = $(selector).data("height"); 

         var margin = methods.getMargin(h);      
         methods.setDimensions(w, h, margin); 

         //methods.setX(); 
         //methods.setY(); 

         //methods.setDomain(data); 


         var initialHeight = 0; 

         //var svg = d3.select(selector + " .stackedchart"); 

         var barholder = d3.select(selector + " .barholder"); 


         var state = barholder.selectAll(".state") 
          .data(data) 
          .enter() 
           .append("g") 
           .attr("class", "g") 
           .attr("x", function(d) { 
            return methods.x(d.Label); 
           }) 
           .attr("transform", function(d) { 
            return "translate(" + methods.x(d.Label) + ",0)"; 
           }); 

         var bar = state.selectAll("rect") 
          .data(function(d) { 
           return d.blocks; 
          }); 

         // Enter 
         bar.enter() 
          .append("rect") 
          .attr("width", methods.x.rangeBand())      
          .attr("y", function(d) { 
           return methods.y(d.y1); 
          }) 
          .attr("height", function(d) { 
           return methods.y(d.y0) - methods.y(d.y1); 
          }) 
          .style("fill", function(d) { 
           return methods.color(d.name); 
          }); 

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

         // Exit 
         bar.exit() 
          .transition() 
          .duration(250) 
          .attr("y", function(d) { 
           return methods.y(d.y1); 
          }) 
          .attr("height", function(d) { 
           return methods.y(d.y0) - methods.y(d.y1); 
          }) 
          .remove(); 

        } 

Answer 1

一个问题是，“状态”是从“输入（）”方法生成的，所以所有的“栏”呼叫只有在执行时你的“g.class”正在生成，而不是更新。更改此：

var state = barholder.selectAll(".state") 
         .data(data) 
         .enter() 
          .append("g")... 

这样：

var state = barholder.selectAll(".state") 
         .data(data); 
state.enter().append("g")... 

看看是否能有点帮助。它似乎不会影响你的小提琴，但你可能会遇到除D3以外的其他问题。尝试简化你的小提琴，并首先让自己的d3工作。