缩放地图时修正缩放“跳跃”

我一直在使用Jason Davies的Rotate the World和World Countries示例，并合并了其他几个小零件以了解d3。缩放地图时修正缩放“跳跃”

我到目前为止提出的一个例子是here。

左上角的小选择器将触发一个新的“行程”显示在地球仪上，行程的质心将以视图为中心。这一切都很好，就像用鼠标在地球上平移和缩放一样。

但是，当一个放大/缩小，改变可见行程，然后再次尝试平移/缩放时，目前的实现存在问题：缩放默认返回到行程更改前的水平 - 导致zoom'jump'我想删除[要查看此行为，请加载我的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(); 
     };

可能是在那里我介绍的bug，作为旋转部分工程没有问题，这仅仅是scale增加引起的问题。

来源

2016-01-01 Geodesic

这可以通过在全局范围内定义缩放行为来解决。

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(); 
        }; 
       });

工作代码here

希望这有助于。

来源

2016-01-02 05:52:58 Cyril

神奇的，这完美的作品。谢谢！我认为全球范围最终是我的问题。我已经尝试了类似的东西，但无济于事。这个例子清除了原因。 – Geodesic

缩放地图时修正缩放“跳跃”

回答

相关问题