修正缩放地图时的“跳转”
修正缩放地图时的“跳转”
提问于 2016-01-01 14:01:05
我一直在使用Jason的旋转世界和世界各国示例，并合并了一些关于d3的其他部分。
到目前为止，我提出的一个例子是这里。
左上角的小选择器将触发一个新的“旅行”将显示在地球和旅行的中心将在视图中。这一切都很好，就像鼠标在地球上进行摇摄和缩放一样。
然而，当一个人放大/退出，改变可见的行程，然后尝试再次平移/缩放时，当前的实现存在一个问题:缩放默认返回到旅行更改之前的水平--导致缩放“跳转”--我想要删除它以查看这种行为，加载MNWE，用鼠标轮放大3次，单击OK按钮加载'J07'，单击按住鼠标按钮的地球仪，按住鼠标按钮并移动一点点--您将看到我所指的跳转。
我很确定这只是我没有正确地更新我的投影的规模，但我不知道足够的故障排除进一步。Jason已经实现了一个d3.geo.zoom函数，它应该能够解决这个问题。我的尝试是在我的$("#sub").on("click" ...电话中调用它，通过：
d3.select("#map").call(d3.geo.zoom().projection(proj).scale(a/2-10).on("zoom.redraw", function() {
d3.select(this).selectAll("path").attr("d", d3.geo.path().projection(proj));
}));但这也给事实带来了虚假的结果。
第344和346行：
var sc = d3.interpolate(proj.scale(), a / 2 - 10); //344
return function(i) {
proj.rotate(interp(i)).scale(sc(i)); //346
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};可能是我介绍错误的地方，因为旋转部分没有问题，只会导致问题的是scale添加。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-02 05:52:58
这可以通过在全局范围内定义缩放行为来解决。
m = d3.behavior.zoom();然后，使用转换中的缩放来更新缩放行为，如下所示，这将停止您所具有的跳转效果。
d3.transition().delay(250).duration(2250)
.tween("rotate", function() {
interp.source(proj.rotate()).target(coords).distance();
var sc = d3.interpolate(proj.scale(), a / 2 - 10);
return function(i) {
proj.rotate(interp(i)).scale(sc(i));
m.scale(sc(i));//update the zoom in the zoom behavior this will sop the jumping effect
d3.select("#map").selectAll("path").attr("d", d3.geo.path().projection(proj));
//r.world();
};
});工作代码这里
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34556761
复制相关文章
相似问题
腾讯云开发者
