在D3 v4中使用zoom.translateExtent约束地图平移

Question

我试图显示单个状态的地图，缩放和平移约束到状态的边界。除了在缩放状态路径以适合较小容器时的平移约束之外，它主要工作。我认为这归结于我不理解为zoom.translateExtent使用什么参数（虽然我对此非常新，所以它可能是其他的东西）。

Live example on bl.ocks.org, with links to prior art

值得注意的是，我使用d3.geoPath的空投影，因为我使用ogr2ogr为每个状态生成投影坐标中的shapefile。这就是为什么我使用缩放变换使地图适合其容器的原因。

Answer 1

@McGiogen's solution is almost correct but misses that MIN needs to vary depending on the zoom scale factor transform.k.

I drew a diagram to see how I needed to constrain my svg to always be contained inside the zoomed view (depicted in my drawing as the LARGER of the boxes, only a portion of which is visible to the user):

(since the constraint x+kw >= w is equivalent to x >= (1-k)w, with a similar argument for y)

thus assuming your svg container size [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框而没有缩放就没有关系，如果你缩小了box的缩放率高于元素，并且在某些时候你会将translateExtent框小于内容（以及奇怪的行为）。

我在这里暂时解决了这个问题 D3 pan+ zoom constraints

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代码中的错误。