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）的总和，以及通过添加相应数据值（从对于旧总计，数据行对象data[name]）。除了分配给y1数组中对象的ages属性之外，还将新的总数分配给y0变量，以便它继续映射下一个值。阵列。

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

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

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

您可以保存条形图的高度而不是其中一个值，但堆栈布局会创建y0 / y1结构，因为它易于与堆叠的区域<一起使用/ em>图表。区域由线的位置定义，而不是由高度定义。