Question

我以下列形式从REST API返回数据。

[{
  "created": "2014-06-01T11:21:47Z",
  "is_good": false,
  "amount": 10
},{
  "created": "2014-06-01T12:01:00Z",
  "is_good": false,
  "amount": 12
},{
  "created": "2014-06-02T10:00:00Z",
  "is_good": true,
  "amount": 8
},{
  "created": "2014-06-02T08:00:00Z",
  "is_good": false,
  "amount": 3
},
...
]

为了制作堆积条形图，我认为解决方案是使用d3.nest()汇总金额，先按日期，然后再按is_good（堆叠类别）汇总。

nestedData = d3.nest()
    .key(function(d) { return d3.time.day(new Date(d.created)); })
    .key(function(d) { return d.is_good; })
    .rollup(function(leaves) { return {amount: d3.sum(leaves, function(d) { return d.amount; })}; })
    .entries(jsonData);

在Mike Bostock's example here之后绘制图表时可能没问题，但在d3.layout.stack()调用中无法工作，因为它要求.values()成为可迭代的组然后计算x和y。这导致我以相反的方式尝试按键，但随后绘制图表本身变得棘手。

所以，经过这一切，我现在想知道是否有一种巧妙的d3方法可以将嵌套值展平为类似于数据集in almost all stacked bar chart examples的东西。

或者，也许我只是没有看到如何最好地使用双嵌套数据来创建基于示例的堆积条形图。

非常感谢任何帮助。

Answer 1

我最终决定在不使用d3.layout.stack的情况下解决这个问题，并尝试将双嵌套数组转换为类似于给定示例的内容。这是一个代码，它将采用复杂的数组并将其压缩成绘制图表时更易于管理的内容。

data.forEach(function(d) {
  var y0 = 0;
  d.amounts = color.domain().map(function(is_good) {
    return {is_good: is_good, y0: y0, y1: y0 += +d.values.filter(function(d) {
      return d.key == is_good;
    })[0].values.amount};
  });
  d.total = d.amounts[d.amounts.length - 1].y1;
});

Here's a working example.

我确信这不是完美的，所以如果有人有更好的方法来达到相同的结果，我会有兴趣看到它！

展平用d3.nest（）创建的嵌套数组以创建堆叠条

1 个答案: