如何设置绘制一系列线段的动画

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则安排a,调用drawnPoint,loop再调用该函数.