限制 D3 地图视区中的缩放和平移

Question

我将如何固定 D3 (v4( 地图上的视区，以便用户无法在此视区之外缩放和平移？假设我想修复东南亚的视口，我的起点是这个小提琴。所以伪代码是这样的：

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

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

我已经看到了肖恩康纳利的以下块，但是提出的解决方案非常复杂且过时(v3(。很高兴地说我也不明白那里发生了什么。真的没有更好的(或"原生"(方法来达到这个结果吗？

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])

这是一个更新的小提琴。