5

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

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

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

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

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

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

ref: 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 回答