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工作。