如何將x，y，y0以外的屬性附加到d3中的streamgraph圖層？

Question

我是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的東西並提取該屬性？

我最初想出了一個真正的hackish方法來做到這一點：

                [
                    {
                        "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; });