调整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>元素的高度。

- Dennis Kaarsemaker

Answer 1

SVG的内部和外部尺寸可以使用viewBox属性独立控制。当您谈论查找g元素的大小时，只有在没有定义viewBox且没有其他缩放转换的情况下才有意义。请保留HTML标签。

这是我建议的做法：

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

此外，请查看 nvd3 如何处理窗口调整大小, 以及如何使用 preserveAspectRatio 在 SVG 元素内部维护坐标系。

---

根据他们的网页，darge-d3不允许显式设置布局选项以限制渲染大小，并且不返回所使用的最大尺寸。但是，可以使用getBBox()获取渲染的g框的尺寸，并尝试设置viewBox，使其恰好适合SVG（或将SVG的height，width设置为g的尺寸1:1，但这可能会导致布局损坏）。

- musically_ut

---

谢谢，getBBox() 是关键。以下代码可以正常工作：var bbox = d3.select("#svg{{ loop.index }}").node().getBBox(); d3.select("#svg{{ loop.index }}").attr("height", bbox.height + 40).attr('width', bbox.width + 40); - Dennis Kaarsemaker

提醒一下 - dagre-d3 现在在布局图上公开了宽度和高度属性。例如，请参考：https://github.com/cpettitt/dagre-d3/blob/master/demo/sentence-tokenization.html#L85。 - Chris Pettitt

@ChrisPettitt 谢谢！ - musically_ut

简而言之，答案就是“使用SVG的viewbox属性来调整dagre输出的大小”？现在，dagre公开了输出尺寸，因此可能不再需要使用getbbox。 - matanster

有人知道一个展示自动缩放的 Fiddle/Plunk 吗？ - Mawg says reinstate Monica