d3js很好地过渡了添加点的行

时间:2017-02-22 21:14:58

标签: d3.js

假设我使用path创建了d3,例如:

line = d3.line()
    .curve(d3.curveLinear)
    .x(function(d) { return x(d.x);})
    .y(function(d) { return y(d.y); });

data = [{x: 0, y: 0}, {x: 5, y: 5}, {x:10, y:10}];

myLine = svg.append("path")
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .datum(data)
        .attr("d", line);

这样可以产生从0到10的漂亮对角线。现在,如果我更新数据以进行一些更改并添加一些点:

data = [{x: 1, y: 1}, {x:2, y:3}, {x: 6, y: 7}, {x:9, y:9}];

并更新我的行

myLine.datum(data).transition().duration(1000).attr("d", line);

它提供了一个奇怪的过渡,它滑动现有路径以适应新路径的前三个点,然后将最终点添加到最后。

同样,如果我更新它以获得更少的点,它会缩短线条,然后将剩余部分滑过,而不是仅重新整形线条。

我理解为什么会发生这种情况,但我想知道是否有办法创造更平稳的过渡。

1 个答案:

答案 0 :(得分:2)

您应该查看此page和此github

.attrTween('d', function () { 
    return d3.interpolatePath(line(data), line(data2)); 
});

看看这个fiddle