d3js很好地添加了过渡点 [英] d3js nicely transition lines with added points
问题描述
说我有一个用d3
创建的path
,例如:
Say I have a path
I created with d3
something like:
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之间形成一条对角线.现在,如果我更新数据进行一些更改并添加一些点:
This makes a nice diagonal line from 0 to 10. Now if I update my data to make some changes and add some points:
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);
它给出了一个怪异的过渡,它将现有路径滑动到适合新路径的前三个点,并笨拙地将最后一点添加到末尾.
It gives a weird transition where it slides the existing path to fit the first three points of the new path and awkwardly adds the final point to the end.
类似地,如果我将其更新为更少的点,它会缩短线,然后将其余部分滑移,而不仅仅是重新调整其位置.
Similarly, if I update it to have fewer points, it shortens the line and then slides the remainder over, instead of just reshaping the line where it is.
我了解为什么发生这种情况,但是我想知道是否有一种方法可以创建更平滑的过渡.
I understand why this happens, but I'm wondering if there's a way to create a more smooth transition.
推荐答案
您应该看一下 github
.attrTween('d', function () {
return d3.interpolatePath(line(data), line(data2));
});
看看这个小提琴
这篇关于d3js很好地添加了过渡点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!