Question

我正在尝试渲染一个移动的流图。我有简单的线图移动，但堆栈让我失望。具体而言，基线设置为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 ... {正常} ... 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

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

如何计算D3.js中堆叠的移动线图的基线？

0 个答案: