在D3地图视口中约束缩放和平移

Question

如何修复D3（v4）地图上的视口，以便用户无法在此视口外进行缩放和平移？说我想修复东南亚的视口，我的出发点是fiddle。所以伪代码就像：

...constrainViewport([[x0,y0],[x1,y1]])

其中x0，y0，x1和y1是边界视口矩形的坐标。

我见过following block from Sean Connelley但是所提出的解决方案非常复杂且过时（第3节）。很高兴地说我不明白那里发生了什么。是否真的没有更好的（或“原生”）方式来实现这一结果？

Answer 1

您可以使用zoom.translateExtent([a,b])执行此操作，其中a是表示右上角的坐标，b是表示平移范围左下角的坐标（当缩小时也会限制缩放）。

由于您正在使用地理数据，因此您可以在纬度和经度上轻松设置限制：

  // extent bounds (arbitrarily chosen)
  var topLeft = projection([-180,80]);
  var bottomRight = projection([0,-20]);
  zoom.translateExtent([topLeft,bottomRight])

这是一个更新的fiddle。