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 자료 자체가 먼저 작동하도록하십시오.