Question

这个小提琴延迟加载一行：

这可以按预期工作。我试图多次加载这一行，所以我替换：

drawLine();

与

while(true)
  drawLine();

但是为什么这会导致函数drawLine()不断被调用而忽略延迟。如何修改小提琴代码，以便不会延迟调用该函数？

小提琴代码：

drawLine();

function drawLine(){
var svgContainer = d3.select("body").append("svg")
                .attr("width", 1200)
                .attr("height", 1200)
                .attr("text-align", "center");    

var labelLine = svgContainer.append("line")
                .attr("x1", 10)
                .attr("y1", 10)
                .attr("x2", 30)
                .attr("y2", 30)
                .attr("stroke-width", 2)
                .attr("stroke", "black")
                 .style("visibility", "hidden")
                .transition()
                .delay(1500)
                .style("visibility", "visible")
}

Answer 1

while(true) drawLine();是一个无限循环，当浏览器延迟堆积时会使浏览器崩溃。尝试限制数字：var i = 10; while(i--) drawLine();。

注意，由于计算机速度很快，所有行都将在几乎相同的时间绘制 - 即运行脚本后1.5秒。如果您想按顺序绘制它们，请尝试设置超时，并增加延迟。

Answer 2

.delay(1500)是非阻塞的，因此你循环将连续调用drawline()而不会有任何延迟。您要找的是timeout：

function drawline(){
  //your stuff
  setTimeout(drawline, 1500);
}

延迟循环中d3元素的加载

2 个答案: