我正在使用D3.js而我在为多个系列的区域图表设置堆叠布局时遇到了问题.我有两种可能的数据结构(如果有帮助的话).一个是提供给脚本的原始数据,在这个结构中：
var data = [{key: 'Group1',value: 37,date: '04/23/12'},{key: 'Group2',value: 12,{key: 'Group3',value: 46,{key: 'Group1',value: 32,date: '04/24/12'},value: 19,value: 42,value: 45,date: '04/25/12'},value: 16,value: 44,value: 24,date: '04/26/12'},value: 52,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,value: 32},{date: 04/25/12,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.这将返回一个带有键字段的对象数组(例如“Group1”)和一个包含相关记录.然后,您将指定一个
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).
这是一个有效的例子：
