javascript - 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

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

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

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

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

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