Datamapsに関する問題D3ピン/マーカーの固定サイズとズーム時の相対位置

Question

ズームを実装しようとしているピンマーカー付きのD3.js Datamaps.jsマップがあります。

http://jsbin.com/xoferi/edit?html,output

画像ピンマーカーは20×20であり、（X + 10、Y + 20での）ピンの位置は、選択された緯度/経度のスポット上にあります。

マップをズームするときに、画像が相対位置からずれて表示される問題があります。例えば、アイスランドのピンを見てみましょう。ズームインすると、左にドリフトします。

マップをズームしてクリックしながらドラッグすると、ピンを同じサイズにして同じ相対位置に保持するにはどうすればよいですか？

私は他の例を探しましたが、私は何が欠けているか分かりません。ビューポートのサイズを計算のために追加する必要があるかもしれません。または、ピンマーカーの起点をデフォルトから変更する必要があるかもしれません。私は確信していません。

REF：d3 US state map with markers, zooming transform issues

Answer 1

あなたのオリジナルの計算はマーカーが20x20ピクセルであることの幅/高さを利用します。

return latLng[0] - 10; 

あなたの「recalcsは、」サイズ変更された画像と同様にこれを行う必要があります。あなたは計算を再実行することができますので、私は、あなたのデータで「本当の」X/Y positoinを隠しておくだろう。そして、

datum.realx = latLng[0]; 
if (latLng) return latLng[0] - 10; 

そして、あなたのズームハンドラでそれらを移動：助けを

map.svg.selectAll("image") 
    .attr("height", 20*(1/scale)) 
    .attr("width", 20*(1/scale)) 
    .attr("x", function(d){ 
    return d.realx - (20*(1/scale)/2); 
    }) 
    .attr("y", function(d){ 
    return d.realy - (20*(1/scale)); 
    });