d3 전환 막대 막대 차트

안녕하세요. 현재 현재 전환하지 않는 d3, js에 누적 막 대형 차트가 있습니다. 차트 업데이트 할 수 있지만, 이것에 1 개 라인 수정 나는 느낌에 따라 누군지 전환 :( 없다 불행히도있다. 가 도와주세요! http://bl.ocks.org/anotherjavadude/2940908 d3 전환 막대 막대 차트

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Simple Stack</title> 
     <script src="http://d3js.org/d3.v3.js"></script>  
     <style> 
      svg { 
       border: solid 1px #ccc; 
       font: 10px sans-serif; 
       shape-rendering: crispEdges; 
      } 
     </style>    
    </head> 
    <body> 

     <div id="viz"></div> 

     <script type="text/javascript"> 

      var w = 960, 
      h = 500 

      // create canvas 
      var svg = d3.select("#viz").append("svg:svg") 
      .attr("class", "chart") 
      .attr("width", w) 
      .attr("height", h) 
      .append("svg:g") 
      .attr("transform", "translate(10,470)"); 

      x = d3.scale.ordinal().rangeRoundBands([0, w-800]) 
      y = d3.scale.linear().range([0, h-100]) 
      z = d3.scale.ordinal().range(["blue", "lightblue"]) 





      // console.log("RAW MATRIX---------------------------"); 
     // 3 columns: ID,c1,c2 
      var matrix = [ 
       [ 1, 5871, 8916] 
      ]; 
      // console.log(matrix) 
      var matrix2 = [ 
       [ 1, 21, 800] 
      ]; 


      function rand_it(x){ 
       return Math.floor((Math.random() * x) + 1); 
      } 


      function render(matrix){ 

       var t = d3.transition() 
          .duration(300); 

       // remove 
       svg.selectAll("g.valgroup") 
        .remove(); 

       svg.selectAll("rect") 
       .transition(t)    
       .remove(); 

       var remapped =["c1","c2"].map(function(dat,i){ 
        return matrix.map(function(d,ii){ 
         return {x: ii, y: d[i+1] }; 
        }) 
       }); 
       console.log("NEW ONE !!!\n",matrix[0]); 

       // console.log("LAYOUT---------------------------"); 
       var stacked = d3.layout.stack()(remapped) 

       x.domain(stacked[0].map(function(d) { return d.x; })); 
       y.domain([0, d3.max(stacked[stacked.length - 1], function(d) { return d.y0 + d.y; })]); 

       // Add a group for each column. 
       var valgroup = svg.selectAll("g.valgroup") 
       .data(stacked) 
       .enter().append("svg:g") 
       .classed("valgroup", true) 
       .style("fill", function(d, i) { return z(i); }) 
       .style("stroke", function(d, i) { return d3.rgb(z(i)).darker(); }); 

       // Add a rect for each date. 
       var rect = valgroup.selectAll("rect") 
       .data(function(d){return d;}) 
       .enter().append("svg:rect") 
       .transition(t) 
       .attr("x", function(d) { return x(d.x); }) 
       .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
       .attr("height", function(d) { return y(d.y); }) 
       .attr("width", x.rangeBand()); 

       // column 
       rect.selectAll("rect") 
        .transition() // this is to create animations 
        .duration(500) // 500 millisecond 
        .ease("bounce") 
        .delay(500) 
        .attr("x", function(d) { return x(d.x); }) 
        .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
        .attr("height", function(d) { return y(d.y); }) 
        .attr("width", x.rangeBand());   

      }; 

      render(matrix); 
      setInterval(function() { render([[1, rand_it(10), rand_it(50)]]); console.log("2"); }, 5000); 


     </script> 
    </body> 
</html>

출처

2016-09-27 Heimdallr NF

당신은에서이 툭 제대로 transition()를 사용하지 않는 최종 값으로 이전 값에서 전환의 변화는 그래서,이 코드 :..

var something = svg.append("something").attr("x", 10); 
something.transition().duration(500).attr("x", 20);

뭔가의 x 속성은 500ms에 10에서 20으로 변경됩니다.

그러나 당신이 할 때처럼, :

var rect = valgroup.selectAll("rect") 
      .data(function(d){return d;}) 
      .enter().append("svg:rect") 
      .transition(t) 
      .attr("x", function(d) { return x(d.x); }) 
      .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
      .attr("height", function(d) { return y(d.y); }) 
      .attr("width", x.rangeBand());

는 이전의 값은? 이것은 "enter"선택입니다. 더 복잡한 작업을 수행하기 위해 수행 한 작업은 다음과 같습니다.

svg.selectAll("rect") 
      .transition(t)    
      .remove();

시작 부분에 전환 할 직사각형이 없습니다. https://jsfiddle.net/gerardofurtado/3ahrabyj/

이는 최적화 된 코드, 더 적은 아름다운 코드가 아님을 염두에두고하십시오 :

는 좀 "갱신"을 선택하면 이미지 remove()을 제거하고 생성, 코드에서 몇 가지 변경을 그냥 만든 트랜지션이 작동하도록 최소한의 변경 만하면됩니다. 여기서 많은 개선을해야합니다.

출처

2016-09-27 15:08:49

고맙습니다. !!!! 나는 이것에 신참이다 : ( –

d3 전환 막대 막대 차트

답변

관련 문제