Как прикрепить свойства, отличные от x,y,y0, к слою потокового графа в d3?

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 и извлечь это свойство?

Я изначально придумал действительно хакерский способ сделать это:

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