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

Question

I am following the circle example :

I created the circle below, and I wish to make the opacity transition be that as the data set updates, the circle will start appearing one after another. For example, if the data length is 5, then circle 1 appears, then circle 2, ... finally circle 5. And if the data is updated so its length is 2, then circle 1 appears, then circle 2 appears. How do I do this effect? So far, the transition() works on the data set uniformly.

    circle.enter().append("circle")
        .attr("class", "dot");

    // Update (set the dynamic properties of the 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);

Answer 1

Problem:

Setting a delay for each element in a "transition" selection.

Solution:

Use delay() with function(d, i)

Instructions:

You have to add this after transition() :

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

Where someNumber is the delay, in milliseconds, for each element.