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);
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}];
And update my line
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.
You should have a look at this page and this github
.attrTween('d', function () {
return d3.interpolatePath(line(data), line(data2));
});
Have a look at this fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With