调整d3 / dagre-d3 svg以显示所有内容

Question

我正在尝试用dagre-d3创建DAG。这些DAG的数据来自数据库，每个DAG的数据是不同的，因此，在向图中添加所有节点和边之前，我不知道要给出包含svg的宽度/高度。

因此，理想情况下，我应该在添加所有节点和边缘后调用类似的d3.select("#svg1").resize_to_match_contents()，以确保所有节点都是可见的，并且svg不太大。当然没有这样的功能，我也不知道如何实现它。我知道我可以调用d3.select("#svg1").attr("height", "10")来设置高度，但是不知道如何恢复/计算<g>元素在SVG中的高度。

Answer 1

SVG的内部和外部维度可以使用http://www.w3.org/TR/SVG/coords.html属性独立控制。当您谈到查找g元素的大小时，只有在没有定义viewBox和任何地方都没有其他缩放转换的情况下，才有意义。

​

​

我建议你这样做：

1. 将width/height的svg元素设置为window.innerWidth和window.innerHeight，或设置到您希望它增长到的最大维度。
2. 将viewBox属性设置为类似于"0 0 100 100"的内容，然后定义代码中的所有尺度以使域[0, 100]。这将确保图形缩小以适合您指定的区域。

另外，看看句柄窗口大小是如何实现的，以及如何在使用preserveAspectRatio调整大小时维护SVG元素中的坐标系。

根据我可以从他们的网页收集到的信息，darge-d3不允许设置布局选项来显式限制呈现大小，也不返回它使用的最大维度。但是，可以使用getBBox()获取呈现的g框的维度，并尝试设置viewBox，使其只适合SVG (或设置SVG上的height、width以匹配g 1:1的维度，但这可能导致布局中断。