transition - d3.js. How to animate throughout all data set from start to end? -

i draw circle , want run transition first last point of data set. can't understand how it. code available here. how can it? best practice kind of animation?

var data = [[{     x: 10,     y: 10,     r: 10,     color: "red" }, {     x: 70,     y: 70,     r: 15,     color: "green"   }, {     x: 130,     y: 130,     r: 20,     color: "blue" }]];  function setup() {      this.attr("cx", function(d, i) {         return d[i].x;     }).attr("cy", function(d, i) {         return d[i].y;     }).attr("r", function(d, i) {         return d[i].r;     }).attr("fill", function(d, i) {         return d[i].color;     }); }  var canvas = d3.select("body")     .append("svg")     .attr("width", 300)     .attr("height", 300); canvas.append("rect")     .attr("width", 300)     .attr("height", 300)     .attr("fill", "lightblue"); var circles = canvas.selectall("circle")     .data(data)     .enter()     .append("circle") .call(setup); 

are looking something this?

var data = [[{     x: 10,     y: 10,     r: 10,     color: "red" }], [{     x: 70,     y: 70,     r: 15,     color: "green"   }], [{     x: 130,     y: 130,     r: 20,     color: "blue" }]];  ...  var circles = canvas.selectall("circle")     .data(data[0]);  circles     .enter()     .append("circle")     .call(setup);  circles     .data(data[1])     .transition()     .duration(2000)     .call(setup)     .each("end",function(){     circles         .data(data[2])         .transition()         .duration(2000)         .call(setup);     }); 

edits comment

if have variable number of points, great place use recursive function:

// first point var circles = canvas.selectall("circle")     .data([data[0]]); circles     .enter()     .append("circle")     .call(setup);  // rest of points... var pnt = 1; // kick off recursion dotransition();  function dotransition(){      circles         .data([data[pnt]])         .transition()         .duration(2000)         .call(setup)         .each("end",function(){             pnt++;             if (pnt >= data.length){                 return;             }             dotransition();         }); } 

updated example.