调整d3/dagre-d3 svg的大小以显示所有内容
Den*_*ker 9 javascript svg d3.js dagre-d3
我正在尝试使用dagre-d3创建DAG .这些DAG的数据来自数据库,每个DAG都有所不同,因此,在将所有节点和边添加到图之前,我不知道给出包含svg的宽度/高度.
理想情况下,我会d3.select("#svg1").resize_to_match_contents()在添加所有节点和边之后调用类似的东西,以确保所有节点都可见且svg不是太大.当然没有这样的功能,我也不知道如何实现它.我知道我可以调用d3.select("#svg1").attr("height", "10")设置高度,但不知道如何检索/计算<g>SVG内元素的高度.
可以使用viewBox属性独立控制SVG的内部和外部维度.当你谈到找到元素的大小时g,只有在没有viewBox定义且没有任何其他缩放变换的情况下才有意义.
我建议你这样做:
- 设置
width/height中的svg元素的window.innerWidth和window.innerHeight,或者你希望它长到最大尺寸. - 将
viewBox属性设置为类似"0 0 100 100",然后在代码中定义所有比例以获得域[0, 100].这将确保图形缩小以适合您指定的区域.
另外,请查看nvd3句柄窗口如何调整大小,以及如何使用preserveAspectRatio在调整大小时维护 SVG元素内的坐标系.
从我可以从他们的网页上收集的内容来看,darge-d3不允许设置布局选项以明确限制渲染大小,也不会返回它使用的最大尺寸.然而,人们可以使用它getBBox()来获取g它所呈现的框的尺寸,并尝试设置viewBox它以使其恰好适合SVG(或在SVG上设置height,width以匹配g1:1 的尺寸,但这可能导致破碎的布局.
- 只是抬头 - dagre-d3现在在布局图上显示宽度和高度属性.例如,请查看:https://github.com/cpettitt/dagre-d3/blob/master/demo/sentence-tokenization.html#L85. (4认同)
- 谢谢,`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);` (2认同)
| 归档时间： |
|
| 查看次数： |
3415 次 |
| 最近记录： |