Question

实际上我想用D3来创建数据可视化的地图。我试图定义一个lon和lat坐标点的样本数据集。这是一个JSON对象数组，其中每个对象都有键＆＃34; lon＆＃34;和＆＃34; lat＆＃34;。我已经在地图上设置了这些点，这些点是从点发出的同心圆像图像 [！[在此处输入图像说明] [1]] [1]

但是当放大地图或拖动地图时，这些从地图上的点发出的同心圆圈将不会移动，如下图所示 [！[在此处输入图像说明] [2]] [2]

我的代码，

var width = window.innerWidth,
height =  window.innerHeight;

var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(153)
.rotate([160, 0])
.translate([width / 2, height / 2])
.precision(.1);

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");

var arcGroup = g.append('g');

var y = d3.scale.ordinal().domain(d3.range(1)).rangePoints([0, height]);
 var data = [ { "lat":-6.13, "lon":  39.31 },{ "lat": 35.68, "lon": 139.76 },
             { "lat": -36.85, "lon": 174.78 },{ "lat": 13.75, "lon":  100.48 },
             { "lat": 29.01, "lon": 77.38 },{ "lat": 1.36, "lon": 103.75 },
             { "lat":-15.67, "lon": -47.43 },{ "lat":22.90, "lon": -43.24 }];

 // load and display the World
d3.json("world-110m2.json", function(error, topology) {
g.selectAll("path")
  .data(topojson.object(topology, topology.objects.countries)
  .geometries)
  .enter().append("path")
  .attr("d", path)

  //add path
   g.selectAll("circle")
   .data(data)
   .enter()
    .append("circle")

    .attr("class", "dot")
    .attr("r", 8)
   .attr("transform",translateCircle);

    var  links = [];
    var count = 0;
    for(var i=0, len=data.length-1; i<len; i++){
        console.log(i);
// (note: loop until length - 1 since we're getting the next
//  item with i+1)
    links.push(

    {
        type: "LineString",
        coordinates: [
            [ data[i].lon, data[i].lat ],
            [ data[i+1].lon, data[i+1].lat ]
        ]


    });i = i+1;
   }
    // Standard enter / update 
   var pathArcs = arcGroup.selectAll(".arc")
    .data(links);

  //enter
   pathArcs.enter()
    .append("path").attr({
        'class': 'arc'
    }).style({ 
        fill: 'none',
    });

 //update
 pathArcs.attr({
        //d is the points attribute for this path, we'll draw
        //  an arc between the points using the arc function
        d: path
    })
    .style({
        stroke: '#0000ff',
        'stroke-width': '1px'
    })

});
setInterval(function(){
      data.forEach(function(datum)
      {
          svg.append("circle")
          .attr("class", "ring")
          .data(data)
          .attr("transform", function(d) {
           return "translate(" + projection([
           datum.lon,
           datum.lat
              ]) + ")";
          })
          .attr("r", 6)
          .style("stroke-width", 3)
          .style("stroke", "red")
          .transition()
          .ease("linear")
          .duration(6000)
          .style("stroke-opacity", 1e-6)
          .style("stroke-width", 1)
          .style("stroke", "brown")
          .attr("r", 160)
          .remove();
      })
  }, 750)
var zoom = d3.behavior.zoom()
.on("zoom",function() {
    g.attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
    g.selectAll("path")  
        .attr("d", path.projection(projection)); 
});

svg.call(zoom)

function translateCircle(datum, index)
      {
        return "translate(" +  projection([datum.lon, datum.lat]) + ")";
      };

如果您能指出一些有用的示例或教程

，那就太棒了

Answer 1

将圆圈附加到缩放功能中定义的<g>元素。

setInterval(function(){
    data.forEach(function(datum){
        g.append("circle")

codepen：http://codepen.io/Aure1ius/pen/jVgdmv

缩放或拖动d3地图时圆圈位置不同？

1 个答案: