调整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")来设置高度，但不知道如何检索/计算SVG中<g>元素的高度。

Answer 1

可以使用viewBox属性独立控制SVG的内部和外部维度。当您谈到找到g 元素的大小时，只有在没有定义viewBox并且没有其他比例在任何地方进行转换。

以下是我建议你这样做的方法：

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

另外，请看一下nvd3 handles window resizes的方式，以及如何在使用preserveAspectRatio调整大小时维护SVG元素内的坐标系。

---

从我可以从他们的网页上收集到的内容，darge-d3不允许设置布局选项以明确限制渲染大小，并且不返回它使用的最大尺寸。但是，可以使用getBBox()来获取其呈现的g框的尺寸，并尝试设置viewBox，使其只符合SVG （或者在SVG上设置height，width以匹配g 1：1的维度，但这可能会导致布局损坏。