D3.js 展平使用d3.nest()创建的嵌套数组以创建堆叠条
我有以下形式的RESTAPI返回的数据D3.js 展平使用d3.nest()创建的嵌套数组以创建堆叠条,d3.js,D3.js,我有以下形式的RESTAPI返回的数据 [{ "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-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()
来汇总金额,首先按日期,然后按是否良好(堆叠类别)
在绘制下面的图表时,这可能很好,但在d3.layout.stack()
调用中不起作用,因为它需要.values()
作为组iterable,然后从中计算x和y。这让我尝试了另一种方法,但绘制图表本身变得很棘手
所以在所有这些之后,我现在想知道是否有一种简洁的d3方法可以将嵌套的值展平成类似于数据集的东西
或者,也许我只是没有看到如何最好地使用双嵌套数据根据示例创建堆叠条形图
任何帮助都将不胜感激。我最终决定根本不使用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;
});
我相信这并不完美,所以如果有人有更好的方法来达到同样的效果,我很有兴趣去看看
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;
});