Question

我正在使用D3构建地图绘图工具。我正在使用此example。

一切正常但我想用10ms的差异绘制每个点，就像它的绘图一样。

我试着做一个间隔但是没有用。我也想制作css动画，每个点都有动画延迟，但看起来效果不好。

有人可以向我解释如何逐个绘制数据吗？

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

Answer 1

可以通过圆圈渲染圆圈，但它有点复杂。也许一个解决方法是将所有这些透明化，并将不透明度设置为1，延迟为10毫秒：

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

这是你的傻瓜：http://plnkr.co/edit/ys4VofukQOvA4pY0TQX7?p=preview

D3.js一次绘制每个点

1 个答案: