title: How to make circle to appear one after another using d3 transition?
body: <p>I am following the circle <a href="http://bl.ocks.org/mbostock/1125997" rel="noreferrer">example</a>:</p>
  
  <p>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. </p>
  
  <pre><code>    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);
  </code></pre>