Accepted answer

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:

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).

Related Query

More Query from same tag