D3積み上げ棒グラフのデータを更新しています

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

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]
      }
];

2つのデータ配列があります（1つはdataと呼ばれ、もう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しかし、それはあまりよくコメントされていないので、私はまだ理解していません。

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