路径未在d3堆积区域图中绘制

I'm trying to plot a stacked area chart

我正在尝试绘制堆积区域图表

I've distilled the problem down to this plunker.

我把这个问题提炼到了这个问题上。

Sample data is below and I've confirmed that the data (recalculated by the stack layout) is passed to areaFcn, the area generator function. Just that the paths are never updated with the data. I have no idea why.

示例数据如下,我已经确认数据(通过堆栈布局重新计算)传递给区域生成器功能areaFcn。只是路径永远不会随数据更新。我不知道为什么。

Anyone?

Thanks!

var areaFcn = function(d, i) {
 d3.svg.area() 
 .x(function(d, i) { return xScaleT(d.t); }) 
 .y0(function(d) { return yScale(d.y0); }) 
 .y1(function(d) { return yScale(d.y0 + d.y); }); 
}

var inData = [ {"data":[
 {"svName":"BBC [890]","avgBW":9654498}, 
 {"svName":"CNN [453]","avgBW":4033202}, 
 {"svName":"ESPN [984]","avgBW":4715123}], 
 "timestamp":1430712151000}, 
 {"data":[ 
 {"svName":"BBC [890]","avgBW":9654498}, 
 {"svName":"CNN [453]","avgBW":4033202}, 
 {"svName":"ESPN [984]","avgBW":4715123}], 
 "timestamp":1430712153000}, 
 {"data":[ 
 {"svName":"BBC [890]","avgBW":4103549}, 
 {"svName":"CNN [453]","avgBW":4413707}, 
 {"svName":"ESPN [984]","avgBW":11648783}], 
 "timestamp":1430712156000} 
]

http://plnkr.co/edit/dVU7NRwVsxjiQLRRKnoS

1 个解决方案

#1

The path has no d attribute. Some debugging in the code shows, that the function areaFcn returns undefined. Change it to this and it'll work:

该路径没有d属性。代码中的一些调试显示,函数areaFcn返回undefined。将其更改为此并且它将起作用:

var areaFcn = d3.svg.area()
.x(function(d, i) {
    return xScaleT(d.t); })
.y0(function(d) {
    return yScale(d.y0); })
.y1(function(d) {
    return yScale(d.y0 + d.y); });