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中的地图。您可以放大状态并在全国范围内拖动，导航到当前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。