D3.js一次繪製每個點

Question

我正在用D3構建一個繪圖工具。我正在使用這個example。

一切正常，但我想繪製每個點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); 
} 

Answer 1

可以用圓來渲染圓，但有點複雜。也許一個解決辦法是吸引所有的人都透明，並與10ms的延遲設置不透明度爲1：

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