D3.jsは一度に各点を描画します

Question

私はD3で地図描画ツールを構築しています。私はこれを使用していますexample。

すべて動作しますが、図面のように10msの差を付けて各点を描きたいと思います。

私はインターバルを作ろうとしましたが動作しませんでした。私はまた、CSSのアニメーションを作ることを考えていましたが、各点でアニメーションが遅れていましたが、それはうまくいっていないようです。

データを1つずつ描画する方法を教えてもらえますか？

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

円で円を描くことは可能ですが、少し複雑です。たぶん、この問題を回避するには、透明それらのすべてを描くことで、10ミリ秒の遅延で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