D3 - 以设置的延迟逐行加载和显示数据

我正在尝试使用时间序列数据在地图上绘制气泡。我想做的是根据它们的日期慢慢绘制这些气泡，而不是一次全部绘制。

类似于：http://www.nytimes.com/interactive/2014/upshot/mapping-the-spread-of-drought-across-the-us.html?_r=0

下面是一些示例数据：

日期计数代码，国家，纬度，纬度，计数器16-1-28 3 安道尔，42.5,1.516667,0.5771212551/29/16,146，ARE，阿拉伯联合酋长国，24.466666667,54.366667,2.2643528561/30/16,13，AFG，阿富汗，34.51666667,69.183333,1.213943352

D3 地图示例

我已经看过MB关于路径转换的教程，Udacity关于D3的课程，以及许多关于Stack Overflow的问题。

我以前尝试过使用 setInterval 和 setTimeout但大多数示例都是使用多个数据文件的。我想逐行使用一个数据文件。

法典：

var width = 960,
    height = 500;
var projection = d3.geo.mercator()
    .center([0, 5 ])
    .scale(200)
    .rotate([-180,0]);
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([0, 0])
  .html(function(d) {
    return "<strong>Frequency:</strong> <span style='color:white'>" + d.count + "</span>"+ "<br/>" + d.country;
  })
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var path = d3.geo.path()
    .projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
svg.call(tip)
// load and display the cities
d3.csv("cities2_or.csv", function(error, data) {
    max = d3.max(data, function(d) 
        {return +d.counter})
    coloring = d3.scale.linear()
        .domain([0, max])
        .range(["blue", "green"])
    radiusing = d3.scale.linear()
        .domain([0, max])
        //.domain([0, 100])
        .range([2, 30])
    g.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .on('mouseover', tip.show)
       .on('mouseout', tip.hide)
       .attr("cx", function(d) {
               return projection([d.lon, d.lat])[0];
       })
       .attr("cy", function(d) {
               return projection([d.lon, d.lat])[1];
       })
       .style("r", function(d){
                return radiusing(+d.counter)
                ;})
       //.style("opacity", .5)
       .style("fill", function(d){
                return coloring(+d.counter);
                }) 
    });

感谢您的任何帮助

我采纳了@adilapapaya建议并尝试使用延迟功能，但我只能绘制第一个点。我用以下内容代替了上面使用的g.selectAll。但是，这只会在我的csv文件中绘制第一个点，然后停止。

g.append("circle")
    .data(data)
   .attr("cx", function(d) {
           return projection([d.lon, d.lat])[0];
   })
   .attr("cy", function(d) {
           return projection([d.lon, d.lat])[1];
   })
    .style("r", 20)
    .transition()
    .duration(1)
    .delay(function(d, i) { return i*1; })
    .style("r",30)
    .style("fill","green");