D3スタックバーグラフのデータを更新する

SVG内で更新したい新しいデータセットがありますが、スムーズに移行しながらデータを置き換えた要素を正しく取り込む方法がわかりません。D3スタックバーグラフのデータを更新する

http://codepen.io/jacob_johnson/pen/jAkmPG

関連するすべてのコードは、上記CodePenです。しかし、私はここにそのいくつかを掲載します。

// Array to supply graph data 
var FOR_PROFIT = [10,80,10]; 
var NONPROFIT = [60,10,30]; 
var PUBLIC = [40,40,20]; 

var data = [ 
      { 
     "key":"PUBLIC", 
     "pop1":PUBLIC[0], 
     "pop2":PUBLIC[1], 
     "pop3":PUBLIC[2] 
     }, 
      { 
     "key":"NONPROFIT", 
     "pop1":NONPROFIT[0], 
     "pop2":NONPROFIT[1], 
     "pop3":NONPROFIT[2] 
     }, 
      { 
     "key":"FORPROFIT", 
     "pop1":FOR_PROFIT[0], 
     "pop2":FOR_PROFIT[1], 
     "pop3":FOR_PROFIT[2] 
     } 
];

Iは、2つのデータ配列（と呼ばれる1つのデータと変更された情報を持つ別呼ばDATA2）を有します。基本的に、作成したグラフを新しいデータに変換したいと思っています。古いグラフ上でグラフを書き直すには十分理解していますが、私はトランジションを得ていませんし、私が持っているものを変更するのではなく、古いデータの上に新しいデータを印刷するだけです。

var n = 3, // Number of layers 
     m = data.length, // Number of samples per layer 
     stack = d3.layout.stack(), 
     labels = data.map(function(d) { return d.key; }),  
     layers = stack(d3.range(n).map(function(d) 
     { 
      var a = []; 
      for (var i = 0; i < m; ++i) 
      { 
       a[i] = { x: i, y: data[i]['pop' + (d+1)] }; 
      } 
      return a; 
     })), 
     // The largest single layer 
     yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }), 
     // The largest stack 
     yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); }); 

    var margin = {top: 40, right: 10, bottom: 20, left: 150}, 
     width = 677 - margin.left - margin.right, 
     height = 212 - margin.top - margin.bottom; 

    var y = d3.scale.ordinal() 
     .domain(d3.range(m)) 
     .rangeRoundBands([2, height], .08); 

    var x = d3.scale.linear() 
     .domain([0, yStackMax]) 
     .range([0, width]); 

    var color = d3.scale.linear() 
     .domain([0, n - 1]) 
     .range(["#aad", "#556"]); 

    var svg = d3.select("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var layer = svg.selectAll(".layer") 
     .data(layers) 
     .enter().append("g") 
     .attr("class", "layer") 
     .style("fill", function(d, i) { 
      return color(i); 
     }); 

    layer.selectAll("rect") 
     .data(function(d) { 
      return d; 
     }) 
     .enter().append("rect") 
     .attr("y", function(d) { 
      return y(d.x); 
     }) 
     .attr("x", function(d) { 
      return x(d.y0); 
     }) 
     .attr("height", y.rangeBand()) 
     .attr("width", function(d) { 
      return x(d.y); 
     });

これは、レイヤーが個々のバーであるグラフの作成を処理するものです。今私はこれを見た：https://bl.ocks.org/mbostock/1134768しかし、私はまだそれほどよくコメントされていないとして理解していない。

これに関するガイダンス、リンク、またはヘルプは素晴らしいと思います。ありがとう。

出典

2016-07-18 Jacob Johnson