d3のストリームグラフのレイヤにx、y、y0以外のプロパティを追加するにはどうすればよいですか？

Question

私はD3の初心者ですと私は（）Streamgraph例をカスタマイズしようとしてきた：

私はいくつかの問題に遭遇しています

私はカスタムデータプロパティを割り当てますストリームの各レイヤーにそのレイヤーに「タイプ」というラベルが付いていれば、そのレイヤーの上にマウスを置くと、そのレイヤーに「タイプ」が表示されたポップアップボックスが表示されます。

 vis.selectAll("path") 
     .data(data0) 
     .enter().append("path") 

グラフのみフォーマットのデータを取るように見える：各サブアレイ対応上記

  [ 
       [ 
        { 
         "x": 0, 
         "y": 91, 
         "y0": 1.11 
        }, 
        { 
         "x": 1, 
         "y": 290, 
         "y0": 1.11 
        } 
       ], 
       [ 
        { 
         "x": 0, 
         "y": 9, 
         "y0": 1.11 
        }, 
        { 
         "x": 1, 
         "y": 49, 
         "y0": 1.11 
        } 
       ] 
      ] 

I私はこのコードを使用してグラフに入力私のデータソース

ストリームグラフのレイヤーに移動します。

グラフにデータを渡して、各層に追加の「タイプ」プロパティを追加するにはどうすればよいですか？

基本的に、レイヤのデータを参照するときに、d.typeのようなものを入力してそのプロパティを抽出することができます。

私はもともとそれを行うには本当にハック方法を思いついた：

   [ 
        { 
         "x": 0, 
         "y": 9, 
         "y0": 1.11, 
         "type": "listings" 
        }, 
        { 
         "x": 1, 
         "y": 49, 
         "y0": 1.11, 
        } 
       ] 

、その後、私はD [0] .TYPEを言うことによって層データムでそれを参照してください、これはのようには思えませんそれを行う正しい方法。

Answer 1

stack.valuesを使用し、各レイヤーのデータポイントをレイヤーの追加データでラップします。このような

[ 
    { 
    "type": "apples", 
    "values": [ 
     { "x": 0, "y": 91}, 
     { "x": 1, "y": 290} 
    ] 
    }, 
    { 
    "type": "oranges", 
    "values": [ 
     { "x": 0, "y": 9}, 
     { "x": 1, "y": 49} 
    ] 
    } 
] 

そして、スタックレイアウト：

var stack = d3.layout.stack() 
    .offset("wiggle") 
    .values(function(d) { return d.values; });