svg - D3 平移+缩放约束

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 中的 map .您可以放大各州并拖动到全国各地，导航到当前 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 .