Question

我一直在与杰森戴维斯的Rotate the World和World Countries示例合作，并结合其他一些零碎的东西来了解d3。

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

左上角的小选择器将触发一个新的“行程”显示在地球上，行程的质心将在视图中居中。这一切都运行良好，用鼠标平移和缩放地球也是如此。

然而，当一个放大/缩小，改变可见行程，然后再次尝试平移/缩放时，当前实现存在问题：缩放默认返回到行程改变之前的水平 - 导致缩放'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();
       };

可能是我引入错误的地方，因为旋转部分没有问题，只有scale添加会导致问题。

Answer 1

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

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

希望这有帮助。

缩放地图

1 个答案: