d3.js - 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[, Arguments...]) 的文档，

Any additional arguments are arbitrary; they are simply propagated to accessors along with the this object.

因此，您必须更改数据，创建一个可以传递给 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>