d3地図をズームまたはドラッグすると円の位置が異なりますか？

Question

実際に私はデータの視覚化のためのマップを作成するためにD3を使用したいと思います。 私はlonとlatの座標点のサンプルデータセットを定義しようとしています。これはJSONオブジェクトの配列で、各オブジェクトにはキー "lon"と "lat"があります。 私は同心円が画像 のようなドット から発せられると地図上のこれらの点を設定した[！[]ここに画像の説明を入力し、[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