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はオブジェクト配列yにトラバースする方法を知らないので、この上d3.stack()を呼び出すと、動作しません。 （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 = []; 

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>