javascript - How to make circle to appear one after another using d3 transition? -

i following circle example:

i created circle below, , wish make opacity transition data set updates, circle start appearing 1 after another. example, if data length 5, circle 1 appears, circle 2, ... circle 5. , if data updated length 2, circle 1 appears, circle 2 appears. how do effect? far, transition() works on data set uniformly.

    circle.enter().append("circle")         .attr("class", "dot");      // update (set dynamic properties of elements)     circle         .attr("r", 5)         .attr("cy", 20)         .attr("cx", function(d,i){return i*50;})         .attr("fill", "red");      svg.selectall("circle")         .style("opacity", 0)         .transition()         .duration(1000)         .style("opacity", 1); 

problem:

setting delay each element in "transition" selection.

solution:

use delay() function(d, i)

instructions:

you have add after transition():

.delay(function(d,i){ return * somenumber }) 

where somenumber delay, in milliseconds, each element.