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过渡堆积条形图

回答

相关问题