D3js地理缩放地图缩放地图

Question

我有一个D3js地图用topojson.js构建。

var projection = d3.geo.mercator(); 

一切工作正常，但我正在寻找一种我无法实现的效果。当缩放地图时，我希望它上面的引脚缩小，但是如果我缩小它，我需要重新计算它们的坐标，并且我找不到要这样做的公式。

放大处理

scale = d3.event.scale; 
if (scale >= 1) { 
    main.attr("transform", "translate(" + d3.event.translate + ") 
    scale(" + d3.event.scale + ")"); 
}  
else { 
    main.attr("transform", "translate(" + d3.event.translate + ")scale(1)"); 
} 

//43x49 is the size initial pine size when scale = 1 
var pins = main.select("#pins").selectAll("g").select("image") 
      .attr("width", function() { 
       return 43 - (43 * (scale - 1)); 
      }) 
      .attr("height", function() { 
       return 49 - (49 * (scale - 1)); 
      }) 
      .attr("x", function() { 
       //Calculate new image coordinates; 
      }) 
      .attr("y", function() { 
       //Calculate new image coordinates; 
      }); 

我的问题是：我怎么计算x和y基于新的规模有多大？

我希望我很清楚。

感谢您的帮助

编辑：

的初始引脚计算坐标：

"translate(" + (projection([d.lon, d.lat])[0] - 20) + "," 
+ (projection([d.lon, d.lat])[1] - 45) + ")" 

-20和-45具有对目标的销权的提示。

Answer 1

您需要“反比例缩放”引脚，即按照main的比例缩放，您需要沿相反方向向上/向下缩放引脚。反比例因子是1/scale，您应该将其应用于包含针图像的每个<g>。这使您可以从<image>节点中删除当前的宽度和高度计算（因为父级<g>的比例将处理它）。

然而，使其正常工作，你还需要删除从<image>的x和y属性，并通过反缩放父<g>应用位置为好。这是必要的，因为如果存在本地偏移量（这是在<image>上设置x和y时的情况），则当缩放父亲<g>时导致本地偏移量被缩放，这使得该引脚移动到不正确的位置。

所以：

var pinContainers = main.select("#pins").selectAll("g") 
    .attr("transform", function(d) { 
     var x = ... // don't know how you calculate x (since you didn't show it) 
     var y = ... // don't know how you calculate y 
     var unscale = 1/scale; 
     return "translate(" + x + " " + y + ") scale(" + unscale + ")"; 
    }) 
pinContainers.select("image") 
    .attr("width", 43) 
    .attr("height", 49) 
    // you can use non-zero x and y to get the image to scale 
    // relative to some point other than the top-left of the 
    // image (such as the tip of the pin) 
    .attr("x", 0) 
    .attr("y", 0)