调整d3 / dagre-d3 svg的大小以显示所有内容 [英] Resizing d3 / dagre-d3 svg to show all contents

问题描述

我正在尝试使用，以及如何使用 preserveAspectRatio 。

---

我可以从他们的网页上收集到的信息，darge-d3不允许设置布局选项以显式限制渲染大小，并且不返回它使用的最大尺寸。但是，可以使用 getBBox（） 获取 g 框的尺寸，然后尝试设置 viewBox 这样它只符合SVG（或设置高度，宽度 SVG匹配 g 1：1的维度，但这可能会导致布局损坏。

I'm trying to create DAGs with dagre-d3. The data for these DAGs comes from a database, are different for each DAG and as such, I do not know the width/height to give the containing svg before adding all nodes and edges to the graph.

So ideally I'd call something like d3.select("#svg1").resize_to_match_contents() after adding all nodes and edges to make sure all nodes are visible and the svg isn't too large. Of course there is no such function, and I have no idea how to implement it. I know I can call d3.select("#svg1").attr("height", "10") to set the height, but have no idea how to retreive/compute what the height of the <g> element inside the SVG is.

解决方案

The internal and external dimensions of SVG can be independently controlled using the viewBox attribute. When you talk about finding the size of the g element, it only makes sense if there there is no viewBox defined and there are no other scale transformations anywhere.

Here is how I would suggest you do it:

1. Set the width/height of the svg element to the window.innerWidth and window.innerHeight, or to the maximum dimension you want it to grow to.
2. Set the viewBox attribute to something like "0 0 100 100" and then define all scales in your code to have the domain [0, 100]. This will ensure that the graph shrinks to fit in your designated area.

Also, take a look at how nvd3 handles window resizes, and how to maintain the coordinate system inside the SVG element upon resize using preserveAspectRatio.

---

From what I could glean from their webpage, darge-d3 does not allow for setting the layout options to limit the render size explicitly and does not return the maximum dimensions it used. One could, however, use getBBox() to get the dimensions of the g box where it rendered and try to set the viewBox such that it just fits the SVG (or set the height, width on the SVG to match the dimension for the g 1:1, but that could lead to a broken layout.

这篇关于调整d3 / dagre-d3 svg的大小以显示所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！