D3使堆积条形图动态化

Question

我正在尝试遵循这个例子：http://bl.ocks.org/mbostock/3886208

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

这是我的对象：

[["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.animals 总是空的。

我以后还要用它：

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

有什么想法吗？

Answer 1

那段特定的代码只是将行中的所有值转换为累积值数组的一种相当混乱的方式。它取决于前一行代码，其中色标的域定义为第一个数据对象中的所有键（即 csv 文件中的所有列名），“State”除外。然后，它将这个列名数组映射到一个对象数组，每个对象包含列名、所有先前值的总和 (y0)，以及通过添加相应数据值创建的新总和（从数据中提取-row 对象data[name]) 到旧总数。除了分配给ages 数组中对象的y1 属性外，新的总数还分配给y0 变量，以便它继续用于映射数组中的下一个值。

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

如果这仍然令人困惑，我建议您查看this 或this example，它们都使用d3 stack layout object 来计算堆叠条的顶部和底部位置。

无论您如何进行计算，最终目标都是为每个数据行创建一个子数组，其中包含您要堆叠的每个值的对象。每个对象都需要有一个y0 值表示堆栈中所有先前值的总和（即，条形的底部），以及一个y1 值表示该条和所有先前值的总和（即，栏的顶部）。

您可以只保存条形的 height 而不是这些值之一，但堆栈布局会创建 y0/y1 结构，因为它易于与堆栈 area 图表。一个区域是由线条的位置而不是高度来定义的。