Question

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

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>的比例将会处理它）。

但是，为了使其正常工作，您还需要从x中移除y和<image>属性，并通过反比例缩放的父{{1}来应用位置也是。这是必要的，因为如果存在局部偏移（在<g>上设置x和y的情况下），则在缩放父<image>时缩放局部偏移，这使得引脚移动到位置不正确。

所以：

<g>

缩放地图时D3js Geo unzoom元素

1 个答案: