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

Question

我一直在使用 Jason Davies 的 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

希望这会有所帮助。