4

私はd3の初心者で、Streamgraphの例（http://mbostock.github.com/d3/ex/stream.html）をカスタマイズしようとしています。

ここに画像の説明を入力してください

私はいくつかの問題に遭遇しました：

ストリーム内の各レイヤーにカスタムデータプロパティ（たとえば、「type」というラベルを付けます）を割り当てて、そのレイヤーにカーソルを合わせると、「type」がリストされたポップアップボックスが表示されるようにします。その層。

データソースをグラフに入力するときは、次のコードを使用します。

      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
                    }
                 ]
             ]

上記の各サブ配列は、ストリームグラフのレイヤーに対応しています。

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

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

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

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

次に、レイヤーデータでd [0] .typeと言って参照しますが、これは適切な方法ではないようです。

4

1 に答える 1

3

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; });
于 2012-05-10T03:05:05.900 に答える