如何将x，y，y0以外的属性附加到d3中的streamgraph图层？

Question

我是d3新手，我一直在尝试自定义Streamgraph示例（http://mbostock.github.com/d3/ex/stream.html）：

我遇到了一些问题：

我想为流中的每个图层分配一个自定义数据属性（例如，让我们说一个名为＆＃34的标签;键入＆＃34;），以便当您将鼠标悬停在该图层上时，弹出框出现在＆＃34;类型＆＃34;为该图层列出。

当我将数据源输入图表时，我使用以下代码：

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

上面的每个子数组对应于流图中的一个层。

如何将数据传递给图表，以便我添加额外的＆＃34;类型＆＃34;每层的属性？

基本上这样当我引用图层的基准时，我可以输入类似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; });