Javascript 更新D3堆叠条形图中的数据

我有一组新的数据，我想在SVG中进行更新，但我不确定如何在平滑转换的同时正确获取替换数据的元素

所有相关代码均在上述代码栏中；不过，我会在这里发布一些

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

我有两个数据数组（一个称为data，另一个称为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);
        });

var n=3，//层数
m=data.length，//每层的样本数
stack=d3.layout.stack（），
labels=data.map（函数（d）{return d.key；}），
层=堆栈（d3.范围（n）.映射（函数（d）
{ 
var a=[]；
对于（变量i=0；i

这就是我的图形的创建过程，它的层是单独的条。现在我看到了这一点：但我还是不明白，因为它的评论不是很好

在这方面的任何指导、链接或帮助都将是惊人的。谢谢。

您的解决方案：

希望这有帮助

您可以通过增加第200行传递给

持续时间（500）

的参数来降低转换速度。（反之亦然）

读取更新，输入和退出选项。在使用D3时，它们几乎总是很方便。作为参考。

您的解决方案：

希望这有帮助

您可以通过增加第200行传递给

持续时间（500）

的参数来降低转换速度。（反之亦然）

---

读取更新，输入和退出选项。在使用D3时，它们几乎总是很方便。作为参考。

这太棒了。我真的很感激这个链接！这太棒了。我真的很感激这个链接！