直交マップでポイントを移動する方法は？

Question

Mike Bostockによって作成された次のマップで、特定のジオロケーションに赤いポイントを追加しようとしています。 https://bl.ocks.org/mbostock/3795040。私のポイントは表示されますが、マップは移動しません。ポイントをマップで移動させるためにコードを編集するにはどうすればよいですか。ありがとうございました。

//add circles to svg 
svg.selectAll("circle") 
    .data([wr,pt,sd,jp,fm]) 
    .enter() 
    .append("circle") 
    .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; }) 
    .attr("cy", function (d) { return projection(d)[1]; }) 
    .attr("r", "8px") 
    .attr("fill", "red"); 

以下は、上記の配列が参照しているものです。あなたはmousemove機能で、円含める必要が

//points 
var wr = [32.6130007, -83.624201]; 
var pt = [48.9334357, 8.961208]; 
var sd = [32.715738, -117.1610838]; 
var jp = [35.6894875, 139.6917064]; 
var fm = [39.1137602, -76.7267773]; 

Answer 1

：https://bl.ocks.org/anonymous/2a6f07cdc12838b296674470ad715bbe/54d6de8d73347081f900c88a203019df74f23ade

PS：ここ

svg.on("mousemove", function() { 
    var p = d3.mouse(this); 
    projection.rotate([λ(p[0]), φ(p[1])]); 
    svg.selectAll("path").attr("d", path); 

    //change the circles' positions here: 
    svg.selectAll("circle").attr("cx", function(d) { 
      console.log(projection(d)); 
      return projection(d)[0]; 
     }) 
     .attr("cy", function(d) { 
      return projection(d)[1]; 
     }) 
}); 

が更新bl.ocksあるいくつかの円が誤って移動するように見える：彼らが正しいですしかし、。事はの後ろにの地球儀です。これらのサークルを非表示にするには、別の関数（この回答の範囲外）を作成する必要があります。

世界中の円を隠す代わりに、円の代わりにpathを使用しています。こうすると、投影によって自動的にそれらのパスがクリップされます。あなたを見て：https://bl.ocks.org/anonymous/9e640195e2c021cd79b5ca9b2238a44c/1c43719a7d6a85d0226cf3c468ac23e570add22d