缩放时Datamaps D3引脚/标记恒定大小和相对位置的问题

Question

我有一个带有图钉标记的D3.js Datamaps.js映射，我一直在尝试实现缩放。

http://jsbin.com/xoferi/edit?html，输出

图像图钉标记为20x20，图钉标记的点（在x + 10，y + 20处）在所选的经度/纬度点上方。

缩放地图时出现问题，图像从其相对位置漂移。例如：看一看冰岛别针。放大时，它向上和向左漂移。

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

我在寻找其他示例，但是我不确定自己缺少什么。也许需要将视口大小添加到计算方法中。或者，可能需要将图钉标记的来源更改为默认值。我不确定。

参考：带有标记的d3美国州地图，缩放变换问题

Answer 1

您的原始计算使用标记的宽度/高度（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));
  });