10

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

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

4

1 回答 1

7

可以使用viewBox属性独立控制 SVG 的内部和外部尺寸。当您谈论查找元素的大小时g，只有在没有viewBox定义且任何地方都没有其他比例转换的情况下才有意义。

svg 宽度 高度 和 viewBox

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

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

另外，看看如何nvd3处理窗口调整大小，以及如何在使用preserveAspectRatio调整大小时保持 SVG 元素内部的坐标系。

从我可以从他们的网页中收集到的信息来看，darge-d3 不允许设置布局选项来明确限制渲染大小，并且不会返回它使用的最大尺寸。但是，可以使用它getBBox()来获取它呈现的框的尺寸g并尝试设置它以viewBox使其恰好适合 SVG（或在 SVG 上设置height,width以匹配g1:1 的尺寸，但这可能会导致到一个破碎的布局。

于 2013-11-17T11:17:25.023 回答