縮放地圖時修正縮放「跳躍」

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

縮放地圖時修正縮放「跳躍」

回答

相關問題