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屬性將從10 500ms內更改爲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());

哪裏以前的值？這是一個「輸入」選擇。爲了使事情更復雜，你做了：

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

在功能的開始，所以沒有矩形做任何轉換。

我做你的代碼進行一些修改，移除remove()和創造了一些「更新」選項：https://jsfiddle.net/gerardofurtado/3ahrabyj/

請心目中，這不是一個優化的代碼，更不是美麗的代碼：我只是做了爲使轉換工作起作用而進行的最低限度的更改，您必須在此進行大量改進。

來源

2016-09-27 15:08:49

非常感謝!!!! 我是一個newbe這:( –

d3過渡堆積條形圖

回答

相關問題