如何動畫繪製一系列線段

Question

我想畫一點，1秒後我想畫出下一點。這在某種程度上可能：

我已經嘗試過：

function simulate(i) { 
    setTimeout(function() { drawPoint(vis,i,i); }, 1000); 
} 

for (var i = 1; i <= 200; ++i) 
    simulate(i); 

function drawPoint(vis,x,y){ 
    var svg = vis.append("circle") 
    .attr("cx", function(d) { 
     console.log(x); 
     return 700/2+x; 
    }) 
    .attr("cy", function(d) { 
     return 700/2+y; 
    }) 
    .attr("r", function(d) { 
    console.log(x); 
    return 6; 
    }); 
} 

不幸的是，這是行不通的。它只是立即畫出整條線。

Answer 1

這是行不通的，因爲for循環會立即運行到最後，setTimeouts將被同時調度並且所有函數將同時觸發。

取而代之的是，這樣做：

var i = 1; 
(function loop(){ 
    if(i++ > 200) return; 
    setTimeout(function(){ 
     drawPoint(vis,i,i); 
     loop() 
    }, 1000) 
})(); 

說明：

這IIFE將首次與i = 1運行。然後，if增加i（做i++）並檢查它是否大於200.如果是，則返回函數loop。如果不是，則預定setTimeout，其再次調用drawnPoint和非常功能loop。