D3: add item after delay, then go

I have a very large csv file that I render with D3.js. One of the data fields is a timestamp, so (instead of displaying all this information at once), I want to create an svg element (based on other data fields) after a delay proportional to the timestamp, and then release it from three seconds. Due to the size of the data, I cannot create all the elements in front, even if they are invisible; each element must exist for only three seconds. The desired effect is a bunch of dots that appear and disappear.

My best attempt below. The strategy is to use two transitions: a delay, and then a decay transition. It does not seem to work, but creates all the elements at once (fading works, though).

d3.csv(datafile).get(function(error, rows) {
        for (var i = rows.length; i--;){
                var d = rows[i];
                plot.select("foo") // empty selection
                    .transition()
                    .delay(/*expression with d.timestamp*/)
                    .call(function(){
                        plot.append("circle")
                            .attr(/*several, snip */)
                            .style("opacity", 1)
                            .transition()
                            .duration(3000)
                            .style("opacity", 0)
                            .remove()
                    });
        }

    });

2015 . , , , 0 . 0, 1 , . , for-. , .

+4
2

setTimeout?

        rows.forEach(function(d, i){
            setTimeout(function(){
                    plot.append("circle")
                        .attr(/*several, snip */)
                        .style("opacity", 1)
                        .transition()
                        .duration(3000)
                        .style("opacity", 0)
                        .remove()
            }, /*expression with d.timestamp*/);
        })
+4

, , , , , , .

const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

sleep(500).then(() => {
  //do stuff
})
0

Source: https://habr.com/ru/post/1523448/


All Articles