d3js如何使线条平滑过渡，并添加数据点

Question

假设我使用 d3 创建了一个类似以下的 path：

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);

它产生了一种奇怪的过渡效果，将现有路径滑动以适应新路径的前三个点，并笨拙地将最后一个点添加到末尾。

同样，如果我更新为更少的点，它会缩短线条，然后将剩余部分滑动过来，而不是仅仅在原地重新塑造线条。

我理解这种情况发生的原因，但我想知道是否有一种更平滑的过渡方式。

- yammerade

Answer 1

你应该看一下这个页面和这个Github。

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

请看这个代码片段。

- Tim B