Add a transition to a d3j scatter plot

Question

I am new to d3j and was playing with transitions. I would like the data points to appear one by one on the page. How do I achieve this? I tried inserting:

.transition()
.delay(1000)

at various points in this section:

 var data=[];
 for (var i=0;i<10;i++)
    data.push([Math.floor(Math.random()*30),Math.floor(Math.random()*30)]);

var svg=d3.select("body")
.append("svg")
.attr("width",w)
.attr("height",h);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);})
 .attr("fill","teal")
 ;

Thanks for the help.

Answer 1

.transition() will dynamically transition a style or attribute. If you want your points to appear in a delayed manner, you can transition the r attribute from 0 (effectively invisible) to the new value. In your code that would look like:

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r", 0)
 .attr("fill","teal")
 .transition()
 .delay(1000)
 .attr("r",function(d){return rscale(d[1]);}) 
 ;

Another way is to transition the opacity from 0 to 1:

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);}) 
 .attr("fill","teal")
 .style("opacity", 0)
 .transition()
 .delay(1000)
 .style("opacity", 1)
 ;

Both of those will have the same effect with .delay() but will look differently with .duration() as the style/attribute is tweened from one value to the other.

Added as a result of clarification in the comments:

To stagger the appearance of nodes, tie the .delay() value to the array position of the elements:

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx",function(d){return xscale(d[0]);})
 .attr("cy",function(d){return yscale(d[1]);})
 .attr("r",function(d){return rscale(d[1]);}) 
 .attr("fill","teal")
 .style("opacity", 0)
 .transition()
 .delay(function(d,i) {return i * 100)
 .style("opacity", 1)
 ;