我正在尝试使用dagre-d3 创建 DAG。这些 DAG 的数据来自数据库，每个 DAG 都不同，因此，在将所有节点和边添加到图表之前，我不知道要给出包含 svg 的宽度/高度。
所以理想情况下，在添加所有节点和边以确保所有节点都可见并且 svg 不会太大之后，我会调用类似 d3.select("#svg1").resize_to_match_contents() 的东西。当然没有这样的功能，我也不知道怎么实现。我知道我可以调用d3.select("#svg1").attr("height", "10") 来设置高度，但不知道如何检索/计算SVG 中<g> 元素的高度。
【问题讨论】：
标签： javascript svg d3.js dagre-d3
可以使用viewBox 属性独立控制SVG 的内部和外部尺寸。当您谈论找到g 元素的大小时，只有在没有定义viewBox 并且任何地方都没有其他scale 转换时才有意义。
我建议你这样做：
svg 元素的width/height 设置为window.innerWidth 和window.innerHeight，或者设置为您希望它增长到的最大维度。viewBox 属性设置为"0 0 100 100" 之类的属性，然后在代码中定义所有比例以具有域[0, 100]。这将确保图表缩小以适合您的指定区域。另外，看看nvd3 handles window resizes 是如何工作的，以及如何在使用preserveAspectRatio 调整大小时保持 SVG 元素内部的坐标系。
根据我从他们的网页中收集到的信息，darge-d3 不允许设置布局选项来明确限制渲染大小，并且不会返回它使用的最大尺寸。但是，可以使用getBBox() 来获取它渲染的g 框的尺寸，并尝试设置viewBox 使其恰好 适合SVG（或设置@987654341 @, width 以匹配 g 1:1 的尺寸，但这可能会导致布局损坏。
【讨论】：
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);