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>