缩放地图时D3js Geo取消缩放元素
Posted
技术标签:
【中文标题】缩放地图时D3js Geo取消缩放元素【英文标题】:D3js Geo unzoom element when zoom map 【发布时间】:2015-06-20 21:44:25 【问题描述】:我有一个用 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 使大头针的尖端正对目标。
【问题讨论】:
你能说明你是如何计算初始 ping 位置的吗?如果引脚在main
内(我假设它是g
或svg
元素),那么当您scale
容器时,您根本不需要更改x
和y
。此外,您可能想要设置scaleExtent,而不是手动检查scale >= 1
。这也会为您提供更好的行为(即,如果用户缩小太多,则缩放不会出现滞后现象)。
你是对的,一切都在主要的。并且引脚在缩放时工作正常,但它们变得太大,所以我想在缩放时缩小它们。但是我不知道如何重新计算“counter-scale”之后的坐标。
【参考方案1】:
您需要“反缩放”引脚,即当main
向上/向下缩放时,您需要在相反方向上向下/向上缩放引脚。反比例因子是1/scale
,您应该将其应用于每个包含引脚图像的<g>
s。这使您可以从 <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)
【讨论】:
谢谢,我喜欢“counter-scale”组。我没有指定 x 和 y,因为它是我正在寻找的。我编辑了我的问题以消除混乱。以上是关于缩放地图时D3js Geo取消缩放元素的主要内容,如果未能解决你的问题,请参考以下文章