D3 stack() 与嵌套对象

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

这似乎不可能。根据有关stack(data[, argument\xe2\x80\xa6]) 的文档，

\n\n

\n

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

\n

\n\n

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

\n\n

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

\n\n

考虑到您问题中的数据数组，有多种方法可以创建上述数组。这是我的解决方案（新数组称为newData）：

\n\n

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

\n\n

这是一个演示：

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n