Question

我有一个带引脚标记的D3.js Datamaps.js地图，我一直在努力实现缩放。

cluster

图像引脚标记为20x20，引脚的点（x + 10，y + 20）超过所选的纬度/经度点。

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

在缩放和点击拖动地图时，如何使针脚保持相同的尺寸和相同的相对位置？

我找了其他的例子，我只是不确定我错过了什么。也许视口大小需要添加到计算soemhow中。或者可能需要从默认值更改引脚标记的原点。我只是不确定。

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

Answer 1

您的原始计算使用标记的宽度/高度为20x20像素：

return latLng[0] - 10;

你的＆＃34; recalcs＆＃34;需要对调整大小的图像执行此操作。我会藏匿＆＃34;真实＆＃34; x / y positoin在您的数据中，因此您可以重新执行计算：

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

数据映射的问题D3 Pin / marker恒定大小和缩放时的相对位置

1 个答案: