D3平移+缩放约束

Question

我正在尝试在平移和缩放时从svg边界外部缩放/切换矩形.我试图基于这个例子来实现它,但我似乎无法让它工作.我创建了这个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占用更多.这类似于约束缩放示例中的地图.您可以放大状态并在全国范围内拖动,导航到当前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为箱体-从左上角抵消,只需设置初始转换.

在这里完成示例.