如何爲堆疊條形圖定義值存取器？

Question

我正在嘗試使用堆棧佈局創建堆棧條形圖。

只有傳遞給它一個x，y座標的數組，我才能使它工作。但我希望能夠向它添加元數據，例如系列標題。

我已閱讀文檔（https://github.com/mbostock/d3/wiki/Stack-Layout），並瞭解它是如何在蒸汽圖上完成的（Correct usage of stack.values([accessor]) in D3 Streamgraph?）。這些例子的問題在於它們沒有考慮像y尺度這樣的事情，使得難以建立像yStackMax這樣的變量。

我還需要將數據提前傳遞給stack（）函數，因爲我打算在數據刷新時重新繪製這些數據和其他數據。總之，而不是，：

var data = [ 
    [ 
     { "x": 0, "y": 91}, 
     { "x": 1, "y": 290} 
    ], 
    [ 
     { "x": 0, "y": 9}, 
     { "x": 1, "y": 49} 
    ], 
    [ 
     { "x": 0, "y": 10}, 
     { "x": 1, "y": 25} 
    ] 
]; 


var layers = d3.layout.stack()(data); 

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); }); 

...這工作，我希望能夠做到：

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

var layers = d3.layout.stack()(data).values(function(d) { return d.values; }); 

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); }); 

...這是行不通的。

這是工作代碼小提琴：http://jsfiddle.net/StephanTual/E6FeP/

這是不工作的代碼的小提琴：http://jsfiddle.net/StephanTual/Tnj8W/

Answer 1

這裏有一個更新的fiddle。

的關鍵部分是：

// define the accessor before adding in the data 
var layers = d3.layout.stack().values(function(d) { return d.values; })(data); 

var yStackMax = d3.max(layers, function(layer) { return d3.max(layer.values, function(d) { return d.y0 + d.y; }); }); 

然後我做了幾個其他的必要調整，以訪問.values。