Hiero Hiero - 8 months ago 38
Javascript Question

D3.js draw each point at a time

I'm building a map plotting tool with D3. I'm using this example.

Everything works but I want to draw each point with a 10ms difference, like its drawing.

I tried to make an interval but didn't work. I also was thinking to make css animation and each point to have an animation-delay but that doesn't seem work well.

Can someone explain to me how to draw the data one by one?

function redrawSubset(subset) {

var radius = 2;
var bounds = path.bounds({ type: 'FeatureCollection', features: subset });
var topLeft = bounds[0];
var bottomRight = bounds[1];

var start = new Date();

var points = g.selectAll('path')
.data(subset, function(d) {
return d.id;


svg.attr('width', bottomRight[0] - topLeft[0] + radius * 2)
.attr('height', bottomRight[1] - topLeft[1] + radius * 2)
.style('left', topLeft[0] + 'px')
.style('top', topLeft[1] + 'px');

g.attr('transform', 'translate(' + (-topLeft[0] + radius) + ',' + (-topLeft[1] + radius) + ')');

points.attr('d', path);


It is possible to render circle by circle, but it's a little complicated. Maybe a workaround is to draw all of them transparent, and setting the opacity to 1 with a delay of 10ms:

points.enter().append("path").attr("opacity", 0)
    .delay(function(d,i){ return i*10})
    .attr("opacity", 1);

Here is your plunker: http://plnkr.co/edit/ys4VofukQOvA4pY0TQX7?p=preview