我正在使用 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); });
最佳答案
您必须向堆栈布局提供一个层数组,因此首先要更改的是使用 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)
,将顶线 y1 定义为 y(d.y0 + d.y)
.
这是一个工作示例:
关于javascript - D3.js 中的堆叠区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11246759/