Javascript D3使堆叠条形图动态化

我试图遵循以下示例：

在我的应用程序中，我必须显示一个堆叠的条形图，在这里我可以看到，例如，特定用户购买了多少种不同的动物

这是我的目标：

[["PersonName1", 10, 10],["PersonName2", 4, 16]];

第一个属性是名称，第二个属性是动物类型1，第三个属性是动物类型2

我被困在这个foreach循环中：

data.forEach(function(d) {
    var y0 = 0;
    d.ages = color.domain().map(function(name) {
        return {name: name, y0: y0, y1: y0 += +d[name]};
    });
    d.total = d.ages[d.ages.length - 1].y1;
});

下面的代码行具体是做什么的

d.ages = color.domain().map(function(name) {
    return {name: name, y0: y0, y1: y0 += +d[name]};
});

我不知道如何对我的对象做同样的事情

我尝试过这样做：

scope.data.forEach(function(d) {
    var y0 = 0;
    d.animals = color.domain().map(function(name) {
        return {name: d[0], y0: y0, y1: y0 += +d[1]};
    });
    d.total = d.animals[d.animals.length - 1].y1;                     
});

但是d.动物总是空的

我必须在以后的中使用它：

  state.selectAll("rect")
      .data(function(d) { return d.animals; })
     .enter()
      .append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

---

有什么想法吗

将行中的所有值转换为累加值数组时，特定的代码位只是一种相当混乱的方式。它取决于前一行代码，其中色标域定义为第一个数据对象中的所有键（即csv文件中的所有列名），但“状态”除外。然后，它将此列名数组映射到一个对象数组，每个对象都包含列名、所有以前值的总和（

y0

），以及通过将相应的数据值（使用

data[name]

从数据行对象中提取）添加到旧总数而创建的新总数。除了被分配给

ages

数组中对象的

y1

属性外，新的总计被分配给

y0

变量，以便它继续映射数组中的下一个值

这不适用于您，因为您的数据行表示为数组，而不是通过读取csv文件创建的key:value对象。因此，您无法创建列名数组，也无法使用这些名称访问数据。您必须自己创建子数组，使用数组索引号访问不同的数据值

如果这仍然令人困惑，我建议您查看or，它们都使用计算堆叠钢筋的顶部和底部位置

无论您如何进行计算，最终目标都是为每个数据行创建一个子数组，其中包含要堆叠的每个值的对象。每个对象都需要有一个

y0

值，表示堆栈中所有先前值的总和（即条的底部），以及一个

y1

值，表示该条和所有先前值的总和（即条的顶部）

---

您可以只保存条形图的高度而不是其中一个值，但堆栈布局会创建y0/y1结构，因为它很容易用于堆叠面积图。面积是由线的位置定义的，而不是高度。

感谢您的解释，我现在解决了它，创建子数组的方法非常混乱：D