Javascript 缩放地图时D3js地理取消缩放元素

Javascript 缩放地图时D3js地理取消缩放元素,javascript,jquery,d3.js,geo,Javascript,Jquery,D3.js,Geo,我有一个用topojson.js构建的D3js地图 var projection = d3.geo.mercator(); 一切都很好,但我正在寻找一种我无法实现的效果。当缩放地图时,我希望上面的图钉缩小,但是如果我缩小,我需要重新计算它们的坐标,我找不到这样做的公式 缩放处理程序 scale = d3.event.scale; if (scale >= 1) { main.attr("transform", "translate(" + d3.event.translate +

我有一个用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以使插脚尖端正好位于目标上。

您需要反向缩放插脚,即当主插脚向上/向下缩放时,您需要以相反方向向下/向上缩放插脚。计数器比例因子为1/比例,应将其应用于包含pin图像的每个s。这使您可以从节点中删除当前的宽度和高度计算,因为父节点的比例将处理它

但是,要使其正常工作,还需要从中删除x和y属性,并通过计数器缩放父对象应用位置。这是必要的,因为如果存在局部偏移(即在上设置x和y时的情况),则局部偏移会随着父对象的缩放而缩放,这会使管脚移动到错误的位置

因此:


你能说明你是如何计算初始ping位置的吗?如果pin位于main中,我假设main是g或svg元素,那么在缩放容器时,根本不需要更改x和y。此外,您可能希望设置,而不是手动检查比例>=1。这将给你一个更好的行为,也就是说,如果用户放大太多,放大时没有滞后现象。你是对的,一切都是主要的。这些图钉在缩放时效果很好,但是它们太大了,所以我想在缩放时缩小它们。但是我不知道如何重新计算计数器刻度后的坐标。谢谢,我喜欢组计数器刻度。我没有指定x和y,因为它是我正在寻找的。我编辑了我的问题以消除混淆。
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)