調整d3 / dagre-d3 svg的大小以顯示所有內容

Question

我正在嘗試使用dagre-d3創建DAG。 這些DAG的數據來自數據庫，每個DAG的數據都不同，因此，在將所有節點和邊添加到圖形之前，我不知道給出包含svg的寬度/高度。

因此，理想情況下，在添加所有節點和邊緣以確保所有節點均可見並且svg不會太大之后，我會調用類似d3.select("#svg1").resize_to_match_contents()類的東西。 當然沒有這樣的功能，我也不知道如何實現。 我知道我可以調用d3.select("#svg1").attr("height", "10")來設置高度，但不知道如何獲取/計算<g>元素內部的高度SVG是。

Answer 1

可以使用viewBox屬性獨立控制SVG的內部和外部尺寸。 當您談論查找g元素的大小時 ，只有在沒有定義viewBox並且在任何地方都沒有其他比例轉換的情況下，它才有意義。

我將建議您這樣做：

1. 將svg元素的width / height設置為window.innerWidth和window.innerHeight ，或者設置為您希望其增長的最大尺寸。
2. 將viewBox屬性設置為"0 0 100 100" ，然后在代碼中定義所有比例以具有域[0, 100] 。 這將確保圖形縮小以適合您的指定區域。

另外，看看如何nvd3把手調整窗口大小 ，以及如何維護使用調整大小時的SVG元素中的坐標系preserveAspectRatio 。

---

從我可以從他們的網頁上收集到的信息來看，darge-d3不允許設置布局選項來顯式限制渲染大小，並且不返回其使用的最大尺寸。 但是，可以使用getBBox()獲取在其渲染的g框的尺寸，然后嘗試設置viewBox以使其恰好適合SVG（或在SVG上設置height ， width以匹配g的尺寸1：1，但這可能會導致布局破裂。