unexpected behaviour of d3.js attrTween - d3.js

Question

I'm a newby in D3.js. I adapted this example from Mike Bostock, into this fiddle, which provides an example of Point-Along-Path Interpolation based on attrTween and getPointAtLength.
In the original example a single circle shape is introduced, which follows a simple path. In the adapted example, instead of introducing a single circle, a bunch of circles are generated which follow a more complex shape, a toy example path made in Inkscape.
The animation runs fine for a number of iterations, but after a short while the circles appear to get caught up in a loop and ultimately the page freezes up. However, if only a single circle is generated e.g. var RadiusData = [20]; (see code below), the animation keeps looping just fine.
What could be causing this? Is there an easy way to avoid this behavior?
var w = $(window).width(),
h = $(window).height();
var svg = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(" + 0.25*w + "," + 0 + ")");
//some toy path data
var dInkScape ="m 360.1639,630.31678 c 1.0609,13.05167 -195.29107,-273.68628 -203.49722,-275.81173 -22.23818,-5.75983 -24.83733,-34.59299 -15.23811,-51.66666 17.17076,-30.54078 59.06286,-32.72422 85.71428,-14.04764 39.11203,27.40863 40.85844,83.86959 12.85717,119.7619 C 202.67874,456.39146 131.20349,457.65152 86.190506,420.21936 29.546262,373.1148 28.796105,286.43841 75.714265,232.36222 132.53844,166.8687 234.51201,166.64035 297.61902,223.07645 c 74.36943,66.50798 74.06939,183.83474 8.09531,255.95237 C 229.54464,562.29148 96.8291,561.45911 15.714334,485.93366 -76.453418,400.11684 -75.086213,251.98848 9.9999617,161.88605 105.45379,60.804734 269.012,62.70845 368.09519,157.36214 478.09632,262.44568 489.74023,530.06221 385.51394,638.12097 z";
var path = svg.append("svg:path")
.attr("d", dInkScape);
//some random data for the circle radii
var RadiusData = [20,50,25,5,40,22,50,66,72,23];
//introduce a circle for each element, set radius and give it some random color
var circle = svg.selectAll("circle")
.data(RadiusData).enter()
.append("svg:circle")
.attr("r", function(d){return d;})
.style("fill",function(d,i) {return "hsl(" + 120 + 100 *Math.random() + ",100%,25%)";})
.attr("transform", "translate(0," + -h / 3 + ")");
//with a 1 second delay introduce a new circle
function transition() {
circle.transition()
.duration(5000)
.delay(function(d,i){return 1000*i;})
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
}
transition();
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}

Answer 1

The problem is that you are re-calling the transition function at the end of each circle's movement, but that function creates a new transition for every circle:
//with a 1 second delay introduce a new circle
function transition() {
circle.transition() //add a transition to every circle
.duration(5000)
.delay(function(d,i){return 1000*i;})
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
//re-run this function after *each* circle's transition completes
}
One option for fixing it is to have the each function only re-start the transition for the first element, i.e. when i==0 or !i is true:
function transition() {
circle.transition()
.duration(5000)
.delay(function(d,i){return 1000*i;})
.attrTween("transform", translateAlong(path.node()))
.each("end", function(d,i){if (!i) transition(); });
}
http://jsfiddle.net/A88W3/8/
The other option, as #mbostock just suggested, is to make your function only apply to a single element:
function transitionThis(d,i) { //index is given to the function
d3.select(this).transition()
.duration(5000)
.delay(1000*i) //not a function anymore
.attrTween("transform", translateAlong(path.node()))
.each("end", transitionThis); //repeat for this element
}
circle.each(transitionThis); //start transitions for each
http://jsfiddle.net/A88W3/9/
Or, if you only wanted to apply the delay once, to stagger the start times, but then to have all the circles move evenly without stopping at the beginning of the path:
function transitionThis(d,i) {
d3.select(this).transition()
.duration(5000) //no delay once started
.ease("linear") //move steadily at all points on path
.attrTween("transform", translateAlong(path.node()))
.each("end", transitionThis); //repeat for this element
}
circle.transition().duration(0)
.delay(function(d,i){return 1000*i;}) //stagger starts
.each(transitionThis); //start transitions for each
http://jsfiddle.net/A88W3/10/
One other thing: at least during debugging, it's always a good idea to code-in a way to stop any infinite loops. I did so in the above fiddles by adding a click function to the svg as a whole that creates a new transition on the circles, interrupting the infinite looping versions:
svg.on("click", function() { //Stop the infinite transitions!
circle.transition(); //create a new empty transition
});

Answer 2

The problem is you’re starting a new transition on all on the circles whenever any one of the circles finishes a transition, leading to an explosion of overlapping transitions if your initial selection has more than one element.
The transition.each callback is called for each element in the selection. You probably want to say d3.select(this) to create a transition for an individual element, as in the chained transitions example.