假设我有一个 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);
它提供了一个奇怪的过渡,它滑动现有路径以适应新路径的前三个点,并笨拙地将最后一个点添加到末尾。
类似地,如果我更新它以减少点,它会缩短线,然后将其余部分滑过,而不是仅仅重新调整线的形状。
我明白为什么会发生这种情况,但我想知道是否有办法创建更平稳的过渡。
最佳答案
关于d3.js - d3js 用添加点很好地过渡线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42402417/