Animating Circles Along Multiple Paths

I am trying to create an animation where circles are being animated on multiple paths. I am able to get the animation I want for one of the paths but am not sure why the circles a

Solution 1:

You're always passing the same path (the first one) to the translateAlong function:

.attrTween("transform", translateAlong(path.node(), index))
//this is always the first path---------^

You have to pass different paths to the translateAlong function. There are different ways for doing that (I don't know which one you want), one of those is:

.attrTween("transform", translateAlong(path.nodes()[index], index))

In this approach, the indices of the circles go from 0 to the data array length minus 1. So, since path.nodes() is an array of elements, it's selecting different ones by their indices.

Here is the updated bl.ocks: https://bl.ocks.org/anonymous/f54345ed04e1a66b7cff3ebeef271428/76fc9fbaeed5dfa867fdd57b24c6451346852568

PS: regarding optimisation, you don't need to draw several paths at the same position! Right now you have dozens of paths which are exactly the same. Just draw the different paths (in your case, only 3).