D3 pan+ 缩放约束

Question

我正在尝试在平移和缩放时使可缩放/拖动矩形不超出 svg 边界。我试图根据这个example 来实现它，但我似乎无法让它工作。我创建了this jsfiddle，只有可缩放和可拖动的矩形。同样，我试图做到这一点，这样你就不能将矩形拖到我放置边框的 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 占用更多。这类似于constrained zoom example 中的地图。您可以放大州并在全国范围内拖动，导航到当前 svg 大小之外的州

Answer 1

您可以通过将您设置的平移坐标限制为框的大小来做到这一点：

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 为框同时使用平移和显式坐标设置，这会容易得多——从左上角偏移，只需设置初始平移。

完整示例here。