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

Question

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

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

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

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

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

我一直在寻找其他示例，但我不确定我缺少什么。也许视口(viewport)大小需要添加到计算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));
  });