Question

我有一个简洁的脚本可以使用d3为我绘制，但有时候，当我有大量数据时，我的一些节点会脱离div。我想我可以在坐标级编码处理这个问题，但是我可以手动使用缩放和平移来轻松修改它，并且想知道是否有一种好的，简单的方法可以自动完成。

我也可以考虑任何其他解决方案。

Answer 1

要自动缩放/平移，您需要获取节点位置的范围并相应地计算比例和偏移。要获得最小/最大坐标，您可以简单地遍历节点。一旦有了这些，可以按如下方式计算比例和偏移量。

scale = Math.min(width / (maxX - minX), height / (maxY - minY));

其中width和height表示容器的尺寸（即SVG）。假设您通过设置SVG transform属性进行缩放/平移，这就是您需要做的事情。

svg.attr("transform",
  "translate(" + minX*scale + "," + (-minY)*scale + ") scale(" + scale + ")");

这样做是计算比例，使得较大的x / y尺寸适合容器的相应尺寸并重新定位容器，使得节点位置范围的左上角对应于左上角容器。