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

Question

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

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

图像大头针标记为 20x20，大头针的点（x+10,y+20）位于所选纬度/经度点上方。

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

在缩放和点击拖动地图时，如何使图钉保持相同的大小和相同的相对位置？

我已经寻找其他示例，但我不确定我缺少什么。也许视口大小需要添加到计算soemhow中。或者可能需要更改引脚标记的原点而不是默认值。我只是不确定。

参考：d3 US state map with markers, zooming transform issues

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));
  });