sqp_125 sqp_125 - 11 days ago 6
Javascript Question

d3, javascript - draw a line like a simulation - ANIMATION

I would like to draw a point and after 1 sec or so I would like to draw the next point. Is this somehow possible:

I already tried:

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;

});


}

Unfortunately this is not working. It just draws the whole line immediately :(

Thanks!

Answer

This will not work, because the for loop will immediately run to the end, the setTimeouts will be scheduled simultaneously and all the functions will fire at the same time.

Instead of that, do this:

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

Explanation:

This IIFE will run for the first time with i = 0. Then, the if increases i (doing i++) and tests if it is bigger than 200, in which situation the function loop returns. If not, a setTimeout is scheduled, which calls drawnPoint and the very function loop again.

Comments