d3.js - How to repeat rotation using d3 -

i'm trying figure out how repeat transition. i' m using world tour own tsv file. tsv file s smaller ends world tour quickly. how can repeat rotation starts @ 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 canvas 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);   })(); } 

one option reset i 0 when exceeds number of countries in list. this:

.each("start", function() {   = (i + 1) % n;    if(i >= names.length)     = 0;      title.text(countries[i].name);   }) 

edit: after looking @ world tour example code, simpler solution redefine n length of data (instead of number of countries on map):

      n = names.length;  // instead of countries.length 

then can leave rest of code is. modulo in expression - i = (i + 1) % n - reset 0 once reach end of list.