How to repeat rotation using d3 - d3.js

Question

I'm trying to figure out how to repeat a transition. I' m using world tour with my own tsv file. The tsv file s much smaller which ends the world tour quickly.
How can I repeat the rotation so its starts at beginning?
//Globe rotating
(function transition() {
d3.transition()
.duration(1500)
.each("start", function() {
title.text(countries[i = (i + 1) % n].name);
})
.style("color", "lightgreen")
.style("text-anchor", "middle")
.tween("rotate", function() {
var p = d3.geo.centroid(countries[i]),
r = d3.interpolate(projection.rotate(), [-p[0], -p[1]]);
return function(t) {
projection.rotate(r(t));
c.clearRect(0, 0, width, height); //clear the canvas for redrawing
c.fillStyle = "black", c.beginPath(), path(land), c.fill();
c.fillStyle = "lightgreen", c.beginPath(), path(countries[i]), c.fill();
c.strokeStyle = "green", c.lineWidth = .5, c.beginPath(), path(borders), c.stroke();
c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
};
})
.transition()
.each("end", transition);
})();
}

Answer 1

One option would be to reset i to zero when it exceeds the number of countries in your list. Something like this:
.each("start", function() {
i = (i + 1) % n;
if(i >= names.length)
i = 0;
title.text(countries[i].name);
})
Edit: After looking at the World Tour example code, a simpler solution would be redefine n to be the length of your data (instead of the number of countries on the map):
n = names.length; // instead of countries.length
Then you can leave the rest of the code as is. The modulo in this expression - i = (i + 1) % n - will reset to zero once you reach the end of your list.