CODEWITHSUNDEEP
javascriptd3.js
Hiero
Hiero

Reputation: 2205

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;
        });

    path.pointRadius(radius);

    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.enter().append('path');
    points.exit().remove();
    points.attr('d', path);
}

Upvotes: 1

Views: 199

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

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)
    .transition()
    .duration(10)
    .delay(function(d,i){ return i*10})
    .attr("opacity", 1);

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

Upvotes: 3

Related Questions