d3重新定位SVG中的元素组

Question

我有一个看起来像这样的svg：

它基本上是一个由节点和链接组成的网络图，它具有平移和缩放的能力。让我们说比如我不小心将整个组拖出屏幕。对我来说，重新集中我的小组的最佳方式是什么，以便我能再次看到它？

我试图进行转换并更改了比例值，但事情仍然不在视野之内。

 this.zoomTrans.scale = this.zoomTrans.scale - .1;
  this.container.attr('transform', 'translate(' + this.zoomTrans.x + ',' + this.zoomTrans.y + ') scale(' + this.zoomTrans.scale + ')');

Answer 1

在大多数情况下d3生成从原点(0, 0)开始的点，这显然也是默认翻译。因此，回到(0, 0)应该会回到图表的可见部分。

要真正使图表居中，您需要计算中心点，这通常是通过计算点的minX，maxX，minY和maxY来完成的。然后计算(minX + maxX) / 2和(minY + maxY) / 2并将该点放在窗口中心。

更高级的解决方案是跟踪翻译并以图表永远不会离开屏幕的方式限制翻译。同样，您需要坐标的最小值和最大值。最小水平翻译为-maxX，最大水平翻译为windowWidth + minX。如果缩放不等于1，则只能将限制与缩放正确相乘。