0

我正在尝试渲染移动流图。我有简单的折线图在移动，但堆栈让我失望。具体来说，基线设置为 y0=height，其中 height 是绘图的高度。下面的代码是我尝试合并 y0 但我遇到了解析错误。数据格式如下：

data = [
           {
               "name": "foo"
               "values": [ {time: 1, value: 23}, {time: 2, value: 32}, ... ]
           },
           {
               "name": "bar"
               "values": [ {time: 1, value: 33}, {time: 2, value: 62}, ... ]
           },
           {
               "name": "baz"
               "values": [ {time: 1, value: 13}, {time: 2, value: 2}, ... ]
           },
           ...
       ];

区域生成器如下所示：

var area = d3.svg.area()
    .interpolate("linear")
    .x(function(d) { return x(d.time); })
    .y0(function(d) { return height - y(d.y0); })
    .y1(function(d) { return y(d.value + d.y0); });

堆栈布局如下所示：

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.time; })
    .y(function(d) { return d.value; })
    .out(function(d, y0, y) {
        d.y0 = y0;
        d.value = d.value;
    });

然后，生成我的路径：

var path = svg.append("g")
    .selectAll("path")
    .data(stack(data))
  .enter().append("path")
    .attr("d", function(d) { return line(d.values); });

我最初用值 0 填充数据，所以我不希望一开始会看到任何东西。它似乎可以工作，并渲染了路径。

问题出现在更新上。路径有解析错误，并在路径生成的各种突发处命中 NaN，我假设是因为访问器 y0、y 或 x 之一未定义？

d="M328.60871678767865,104...{normal}...L395.02613982034944,NaNL395.02613982034944,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401.6597510373444,NaNL401 .6597510373444,NaNL401.6597510373444,NaNL395.02613982034944,NaNL395.02613982034944,NaNL395.02613982034944,NaNL395.02613982034944,NaNL388.3857526981277,NaNL388.3857526981277,NaNL388.3857526981277,NaNL388.3857526981277,NaNL381.7521414811327,NaNL381.7521414811327,NaNL381.7521414811327 ,NaNL381.7521414811327,NaNL375.111754358911,NaNL375.111754358911,NaN...{正常}...L330,0Z"

这是重绘功能：

for (var i = 0; i < data.length; i++) {
    d3.select("#line" + id + "-" + i)
        .attr("d", function(d) { return line(d.values); })
        .attr("transform", null);
}

xAxis.call(x.axis);
yAxis.call(y.axis);

for (var i = 0; i < data.length; i++) {
    path.attr("transform", "translate(" + x(now - (n - 1) * duration) + ")");
} // the translation calculations can be safely ignored

好奇是否有人可以对此有所了解。谢谢！

4

0 回答 0