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()生成器，為我的數據創建堆疊結構，以便我可以將其傳遞給類似的區域生成器對此：

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和y訪問器，以便它可以理解您的輸入數據： x -accessor應返回d.date ， y -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) ，將y(d.y0)線y1定義為y(d.y0 + dy) 。

這是一個有效的例子：

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