D3.js一次绘制每个点

D3.js draw each point at a time

本文关键字：绘制 一次 js D3      更新时间：2023-09-26

我正在用D3构建一个地图绘制工具。我在用这个例子。

一切都可行，但我想画出每一个相差10毫秒的点，就像它的画一样。

我试着做一个间歇，但没有成功。我也在考虑制作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);
}

可以逐圈渲染，但有点复杂。也许一个变通办法是将它们全部绘制为透明，并将不透明度设置为1，延迟10ms:

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

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

相关文章：