使用D3 v4中的zoom.translateExtent限制地图平移

Question

我正在尝试显示一个州的地图，缩放和平移受限于该州的边界。它基本上可以工作，除了当州路径被缩放以适应较小的容器时，平移约束不起作用。我认为这归结于我不理解在zoom.translateExtent中使用什么参数（虽然我非常新手，所以可能是其他问题）。

在bl.ocks.org上的实时示例中，提供了先前技术的链接。

值得注意的一点是，我对d3.geoPath使用了空投影，因为我使用ogr2ogr为每个州生成了一个投影坐标的形状文件。这就是为什么我使用缩放变换来将地图适应其容器的原因。

- bhrutledge

---

这里的问题有点令人困惑。你能详细说明一下你遇到的问题吗？我没有看到你所说的问题！ - Tekill

抱歉，我已经更新了我的示例，使其更加清晰。基本上，当我将状态转换为适合较小容器时，拖动平移功能会出现问题。我认为在使用zoomBounds计算的变换与translateExtent结合时存在问题。如果我删除translateExtent行，则平移是平滑的，但不受容器的限制。 - bhrutledge

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);
}

- Michael Currie

Answer 2

今天我遇到了同样的问题，并进行了一些测试。

我注意到当您的 translateExtent 盒子比内容元素小 时，会发生相同的奇怪行为。

在您（和我的）代码中，缩小页面触发了相同的行为：如果您在没有缩放的情况下正确设置了 translateExtent 盒子，则无关紧要，如果您缩小，则盒子的缩小速度高于元素，并且在某些时候，您将拥有比内容更小的 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代码中的一个bug。

- McGiogen