7

我正在使用 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); });
4

1 回答 1

12

您必须将一组图层提供给堆栈布局，因此首先要更改的是使用nest.entries而不是nest.map。这将返回一个对象数组，其中包含一个key字段（例如“Group1”）和一个values包含相关记录的数组。然后，您将指定一个stack.values访问器，以便堆栈布局可以访问values每个层的数组。

您还需要为堆栈布局定义合适的x和y访问器，以便它可以理解您的输入数据：x -accessor 应该 return d.date，y -accessor 应该 return 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)。

这是一个工作示例：

于 2012-06-29T21:15:00.943 回答