Datamaps D3 Pin/marker 缩放时大小和相对位置不变的问题

Question

我有一张带有图钉标记的 D3.js Datamaps.js 地图，我一直在尝试对其实施缩放。

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

图像图钉标记为 20x20，图钉点（在 x+10，y+20）位于所选 latitude/longitude 点上方。

我在缩放地图时遇到问题，图像偏离了它们的相对位置。例如：看看 Iceland 别针。当您放大时，它会向上和向左漂移。

如何在缩放和单击拖动地图时保持图钉大小相同且相对位置相同？

我已经查找了其他示例，但不确定我遗漏了什么。也许视口大小需要添加到计算中。或者可能需要更改图钉标记的原点。我只是不确定。

参考：

Answer 1

您的原始计算使用了标记的 width/height 为 20x20 像素：

return latLng[0] - 10;

您的 "recalcs" 需要对调整后的图像执行此操作。我会将 "real" 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));
  });

Datamaps D3 Pin/marker 缩放时大小和相对位置不变的问题

Issues with Datamaps D3 Pin/marker constant size and relative position while zooming

svg

d3.js

datamaps