javascript - 绘制许多 d3 svg 对象时循环更新显示

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