数据地图D3的问题缩放时引脚/标记常量大小和相对位置

Question

我有一个D3.js Datamaps.js贴图标记贴图，我一直试图实现缩放。

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

图像销标记是20×20和销的点（在X + 10，Y + 20）是在选定的纬度/经度点。

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

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

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

裁判：d3 US state map with markers, zooming transform issues

Answer 1

你原来的计算利用标记的宽/高为20x20像素：

return latLng[0] - 10; 

你“recalcs”需要与调整后的图像要做到这一点为好。我会藏匿“真正的” 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)); 
    });