5

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

http://jsbin.com/xoferi/edit?html、出力

画像ピン マーカーは 20x20 で、ピンのポイント (x+10、y+20) は、選択した緯度/経度スポット上にあります。

マップをズームすると、画像が相対的な位置からずれるという問題が発生します。例: アイスランドのピンを見てみましょう。ズームインすると、左上にドリフトします。

マップをズームしたりクリックしてドラッグしたりしている間、ピンを同じサイズで同じ相対位置に保つにはどうすればよいですか?

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

参照：マーカー付きのd3米国州マップ、ズーム変換の問題

4

1 に答える 1

4

元の計算では、20x20ピクセルであるマーカーの幅/高さを利用します。

return latLng[0] - 10;

あなたの「再計算」は、サイズ変更された画像と同様にこれを行う必要があります。「実際の」x / y位置をデータに隠して、計算を再実行できるようにします。

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));
  });
于 2016-09-30T19:51:34.587 に答える