D3堆栈（）vs嵌套对象

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>