Question

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

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

以下是一些示例数据：

日期计数代码，国家/地区，lat，lon，counter 1/28/16 3 AND，Andorra，42.5,1.516667,0.577121255 1/29 / 16,146，ARE，阿拉伯联合酋长国，24.46666667,54.366667,2.264352856 30分之1/ 16,13，AFG，阿富汗，34.51666667,69.183333,1.213943352

Example of D3 Map

我已经看过MB关于Path Transitions的教程，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");

Answer 1

感谢Andrew Guy帮我找到了JS小提琴的例子。工作得很完美。我的问题是之前没有使用enter。这是最终的代码。如果有人有任何问题，请回复。

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);})
       .style("r",0)
      .transition()
      .duration(500)
      .delay(function(d, i) { return i*200; })
      .style("r",30);



});


g.selectAll("path")
      .data(topojson.object(topology, topology.objects.countries)
          .geometries)
    .enter()
      .append("path")
      .attr("d", path)
});

// zoom and pan
var zoom = d3.behavior.zoom()
    .on("zoom",function() {
        g.attr("transform","translate("+ 
            d3.event.translate.join(",")+")scale("+d3.event.scale+")");
        g.selectAll("circle")
            .attr("d", path.projection(projection));
        g.selectAll("path")  
            .attr("d", path.projection(projection)); 

  });

svg.call(zoom)

D3 - 按设定延迟

1 个答案: