D3.js中的堆積區域

Question

我正在使用D3.js，並且無法爲多個系列的區域圖表設置堆疊佈局。我有兩種可能的數據結構（如果有幫助的話）。一個是供給到腳本的原始數據，在該結構中：

var data = [{key: 'Group1', value: 37, date: '04/23/12'}, 
      {key: 'Group2', value: 12, date: '04/23/12'}, 
      {key: 'Group3', value: 46, date: '04/23/12'}, 
      {key: 'Group1', value: 32, date: '04/24/12'}, 
      {key: 'Group2', value: 19, date: '04/24/12'}, 
      {key: 'Group3', value: 42, date: '04/24/12'}, 
      {key: 'Group1', value: 45, date: '04/25/12'}, 
      {key: 'Group2', value: 16, date: '04/25/12'}, 
      {key: 'Group3', value: 44, date: '04/25/12'}, 
      {key: 'Group1', value: 24, date: '04/26/12'}, 
      {key: 'Group2', value: 52, date: '04/26/12'}, 
      {key: 'Group3', value: 64, date: '04/26/12'}] 

其次是嵌套結構，使用該代碼創建的：

pData = d3.nest() 
      .key(function(d) { return d.key; }) 
      .map(data); 

在該結構中所得到的：

pData = {Group1: [{date: 04/23/12, key: "Group1", value: 37}, 
        {date: 04/24/12, key: "Group1", value: 32}, 
        {date: 04/25/12, key: "Group1", value: 45}, 
        ...], 
     Group2: [{date: 04/23/12, key: "Group2", value: 12}, 
        {etc, etc, etc}], 
     GroupX: [...] } 

我的問題是：我如何設置一個d3.layout.stack()生成器，使用上述數據結構之一（或一些變化）來創建堆疊str ucture我的數據，我可以將它傳遞給類似這樣的區域生成：

var areaGenerator = d3.svg.area() 
    .interpolate('monotone') 
    .x(function(d) { return x(d.date); }) 
    .y0(h) 
    .y1(function(d) { return y(d.value); }); 

Answer 1

你必須養活層的陣列的棧佈局，所以要改變的第一件事就是用nest.entries而非nest.map 。這將返回一個包含key字段（例如「Group1」）的對象數組和一個包含關聯記錄的values數組。然後，您將指定一個stack.values訪問器，以便堆棧佈局可以訪問各層的values陣列。

您還需要定義適合X和ÿ存取堆棧佈局，以便它可以瞭解你的輸入數據：X -accessor應該返回d.date和ÿ -accessor應返回d.value。您還需要將日期字符串轉換爲日期;你可以使用d3.time.format來解決這個問題。例如：

var format = d3.time.format("%m/%d/%y"); 
data.forEach(function(d) { d.date = format.parse(d.date); }); 

最後，使基線Y0定義爲y(d.y0)和背線Y1被定義爲y(d.y0 + d.y)改變你的區域定義。

這裏有一個工作示例：

• http://bl.ocks.org/3020685