Правильное использование stack.values ​​([accessor]) в D3 Streamgraph?

Question

Я пытаюсь создать диаграмму диаграммы D3 с дополнительными данными на каждый уровень, используя атрибуты значений, как показано в и this question at Stack Overflow.

Заголовок добавляет штраф, но он, похоже, не добавляет значения. Любые идеи о том, что может пойти не так?

Я новичок в d3, поэтому я уверен, что это просто. Код ниже.

var layers = [ 
    { 
    "name": "apples", 
    "values": [ 
     { "x": 0, "y": 91}, 
     { "x": 1, "y": 290} 
    ] 
    }, 
    { 
    "name": "oranges", 
    "values": [ 
     { "x": 0, "y": 9}, 
     { "x": 1, "y": 49} 
    ] 
    } 
]; 

var  m = 2; // number of samples per layer 
var width = 960, 
    height = 500, 
    mx = m - 1, 
    my = 350; 

var stack = d3.layout.stack() 
    .offset("wiggle") 
    .values(function(d) { return d.values; }); 

var area = d3.svg.area() 
    .x(function(d) { 
     return d.x * width/mx; 
    }) 
    .y0(function(d) { 
     return height - d.y0 * height/my; 
    }) 
    .y1(function(d) { 
     return height - (d.y + d.y0) * height/my; 
    }); 

var vis = d3.select("#chart") 
    .append("svg") 
    .attr("width", width) 
    .attr("height", height); 

vis.selectAll("path") 
    .data(stack(layers)) 
    .enter().append("path") 
    .attr("d", area) 
    .append("title") 
    .text(function(d) { return d.name; }); 

Answer 1

В макете стека известно значение, которое вы указали, но генератор области этого не делает. Таким образом, вы должны пройти d.values, а не d к генератору области, например, так:

.attr("d", function(d) { return area(d.values); })