Svg D3盘和x2B；缩放约束

我试图在平移和缩放时缩放/拖动矩形，以避免超出svg边界。我试着基于此实现它，但我似乎无法让它工作。我只创建了一个可以缩放和拖动的矩形。同样，我试图使它，使您不能拖动矩形以外的svg框我把边框。我知道我需要更新移动功能。下面的代码来自第一个链接示例，但它似乎工作得不好，所以我对其中的一部分进行了注释

function move() {
  var t = d3.event.translate,
  s = d3.event.scale;

  //t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
  //t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
  //zoom.translate(t);
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

编辑：因此，另外，我需要能够拖动矩形时，你在所有的方式放大，它比svg大。在下图中，蓝色的矩形是svg，绿色的矩形是svg，您将一直放大，因此绿色的矩形比svg占据更多的空间。这与中的地图类似。您可以放大状态并在全国范围内拖动，导航到当前svg大小以外的状态

---

您可以通过将设置的平移坐标约束为框的大小来执行此操作：

var t = d3.event.translate,
    s = d3.event.scale;

t[0] = Math.max(0, Math.min(t[0], width - s*50));
t[1] = Math.max(0, Math.min(t[1], height - s*50));

svg.attr("transform", "translate(" + t + ")scale(" + d3.event.scale + ")");

这将x坐标限制在0和宽度之间，减去完全显示框所需的空间大小——这取决于缩放级别，因此术语包含

s

。对于y坐标，它是完全相同的

如果不通过框的

x

和

y

同时使用平移和显式坐标设置，则此操作会容易得多——要从左上角偏移，只需设置初始平移即可

---

完整示例。

谢谢！正是我需要的。事实上，还有一个问题。我还需要能够拖动矩形来导航到放大时离开页面的每个角落。使用不带任何填充的矩形更易于查看（请参见此图。在本例中，如果一直放大，则无法拖动矩形以到达离开页面的角落。理想情况下，我希望在矩形末端被带到页面上后停止拖动。不确定您的意思--如何将矩形拖动到不可见的位置？请使用其他信息。感谢您只需从最大值的计算中删除

s*

，即

width-50

而不是

width-s*50

。