Switching between curve types using D3.js
I would like to switch between curve types using D3.js.
Check out this block . The data remains unchanged, but the curve type changes. I expected the paths to keep their approximate positions on the plane - while the data stays the same - but they don't. The paths appear to be redrawn, although I don't understand why base-to-linear paths seem to redraw from left to right, while base-to-linear paths appear to redraw from right to left.
I read Mike Bostock's post on Path Transitions , but I think this is a slightly different problem. There, the data changes, but the type of curve remains the same. Here, the data remains unchanged, but the type of curve changes.
Thanks in advance for your help!
source to share
To understand why you have such a strange transition, compare the d
path attribute with curveBasis
and curveLinear
.
First a curveBasis
:
d = "M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002, 764.512437051732,201.4118508822 L810,185.915611686 "
Now a curveLinear
(same data):
d = "M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"
As you can see, the way is easier with curveLinear
. So the strange transition is the expected behavior.
A possible solution is to use the path interpolation suggested in this code from Mike Bostock.
Here is your bl.ocks with path interpolation: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772
PS: If you want to avoid this strange transition on page load (all paths coming from the top left corner), draw them the first time using the normal method attr
.
source to share