D3堆栈()与嵌套对象

Question

当我试图使用D3v4实现一个规范化的堆叠条形图时，我遇到了一个问题。

这个问题的出现是因为我的数据格式包含在服务器端动态填充的嵌套对象数组。

var data = [{x:"data1", y:[{name:"red", value:10}, {name:"green", value:20}]},
            {x:"data2", y:[{name:"red", value:30}, {name:"green", value:5}]}];

对此调用d3.stack()将无法工作，因为d3不知道如何遍历对象数组y。(https://jsfiddle.net/xv1qgqjg/)

有没有办法告诉d3.stack()在哪里可以找到类似于其他地方使用的.data(function(d){ return d.y; })的相关数据？

Answer 1

似乎是不可能的。根据有关堆栈的文档(数据、参数…)，

任何附加参数都是任意的；它们与此对象一起传播到访问器。

因此，您必须更改数据，创建一个可以传递给d3.stack()的数组，如下所示：

[{red:10,green:20},
{red:30,green:5}]

考虑到问题中的数据数组，有几种方法可以创建上述数组。下面是我的解决方案(新的数组名为newData)：

newData = [];

data.forEach(d => {
    var tempObj = {}
    d.y.forEach(e => {
        tempObj[e.name] = e.value;
    })
    newData.push(tempObj);
});

下面是一个演示：

​

var data = [{x:"data1", y:[{name:"red", value:10}, {name:"green", value:20}]},
            {x:"data2", y:[{name:"red", value:30}, {name:"green", value:5}]}];

newData = [];

data.forEach(d => {
    var tempObj = {}
    d.y.forEach(e => {
        tempObj[e.name] = e.value;
    })
    newData.push(tempObj);
});

var stack = d3.stack()
    .keys(["red", "green"])
    .order(d3.stackOrderNone)
    .offset(d3.stackOffsetExpand);

var series = stack(newData);
console.dir(series);

<script src="https://d3js.org/d3.v4.min.js"></script>

​