更新显示对象

Question

我通过d3.js

var line = d3.svg.line() 
var r = 1 


var svg = d3.select("body").append("svg:svg") 
    .attr("width", 1000) 
    .attr("height",1000) 

for (var x=0; x< 1000 ; x+=3*r) 
    { 
    for (var y=0; y< 1000 ; y+=3*r) 
    { 
     svg.append("circle") 
      .attr("cx", x) 
      .attr("cy", y) 
      .attr("r", r) 
    } 
    } 

fiddle

吸引很多圈与一些循环似乎在浏览器刷新循环已经完成后才会显示。然后所有对象立即出现。如何在每个元素之后强制刷新，以便我可以观察图像的进度？

感谢

Answer 1

我会单独创建的数据，然后使用一个过渡：

var data = []; 
for (var x=0; x< 1000 ; x+=3*r) { 
    for (var y=0; y< 1000 ; y+=3*r) { 
    data.push([x, y]); 
    } 
} 

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