我通过 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)
}
}
浏览器似乎只在循环结束后才刷新显示。然后所有对象立即出现。我怎样才能在每个元素之后强制刷新,以便我可以看到图像的进度?
谢谢
最佳答案
我会单独创建数据,然后使用转换:
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);
关于javascript - 绘制许多 d3 svg 对象时循环更新显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32974794/