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

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

Где каждый суб-массива выше соответствует к слою в streamgraph.

Как передать данные на график, который позволяет мне добавить дополнительное свойство «type» для каждого слоя?

В принципе, так, что, когда я обращаюсь к исходному уровню слоя, могу просто набрать что-то вроде d.type и извлечь это свойство?

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

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

, а затем я отношу к нему в слое данности, говоря, d [0] .тип, но это не похоже, правильный способ сделать это.

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; });