在D3 v4中使用zoom.translateExtent約束地圖平移

Question

我正在嘗試顯示單個狀態的地圖，縮放和平移約束到狀態的邊界。 它主要工作，除了平移約束時狀態路徑縮放以適應較小的容器。 我認為這歸結於我不理解用於zoom.translateExtent參數（盡管我對此非常新，所以它可能是其他的東西）。

bl.ocks.org上的實例，包含現有技術的鏈接 。

一個值得注意的事情是我正在為d3.geoPath使用空投影，因為我使用ogr2ogr在每個狀態的投影坐標中生成shapefile。 這就是我使用縮放變換使地圖適合其容器的原因。

Answer 1

@ McGiogen的解決方案幾乎是正確的但是錯過MIN需要根據縮放比例因子transform.k 。

我繪制了一個圖表，看看我是如何將我的svg限制為始終包含在縮放視圖中的（在我的繪圖中描繪為框的最大部分，其中只有一部分對用戶可見）：

（因為約束x+kw >= w等於x >= (1-k)w ， y的類似參數

因此假設你的svg容器大小[w, h] ：

function zoomed() {
    var t = d3.event.transform;

    t.x = d3.min([t.x, 0]);
    t.y = d3.min([t.y, 0]);
    t.x = d3.max([t.x, (1-t.k) * w]);
    t.y = d3.max([t.y, (1-t.k) * h]);

    svg.attr("transform", t);
}

Answer 2

我今天面臨同樣的問題而且我做了一些測試。

我注意到，當translateExtent框小於內容元素時，會發生同樣奇怪的行為。

在你的（和我的）代碼中，相同的行為是通過縮小觸發的 ：如果你沒有縮放正確設置translateExtent框就沒關系，如果你縮小框就會以比元素更高的速率減少指向您將使translateExtent框小於內容（以及奇怪的行為）。

我暫時解決了這里所說的D3 pan + zoom約束

var MIN = {x: 0, y: -500},     //top-left corner
    MAX = {x: 2000, y: 500};   //bottom-right corner

function zoomed() {
   var transform = d3.event.transform;

   // limiting tranformation by MIN and MAX bounds
   transform.x = d3.max([transform.x, MIN.x]);
   transform.y = d3.max([transform.y, MIN.y]);
   transform.x = d3.min([transform.x, MAX.x]);
   transform.y = d3.min([transform.y, MAX.y]);

   container.attr("transform", transform);
}

我仍然是d3新手，但我認為這是translateExtent代碼中的一個錯誤。