更新顯示對象

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);