本文介绍了dagre-d3库的使用，该库基于d3.js v4版本以上。由于dagre-d3在github上缺乏官方文档，建议参考dagre.js的文档。文章提到了dagre.js和dagre-d3的github链接，并指出d3 v3到v4的变化。此外，还提及了弹窗库tipsy.js和tipsy.css的使用，以及一些相关博客文章和示例链接，展示了如何修改和应用dagre-d3创建图形，如改变方向和调整节点间线距等。
dagre-d3 github 上没有文档介绍 看dagre.js的吧 基于d3.js v4以上
dagre.js github https://github.com/dagrejs/dagre/wiki
dagre-d3 github https://github.com/dagrejs/dagre-d3/wiki
基于d3 v3 和 v4 的变化
https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187
弹窗 tipsy.js tipsy.css
https://blog.csdn.net/czy279470138/article/details/90240610
转发demo
https://blog.csdn.net/davidPan1234/article/details/82851392
https://blog.csdn.net/qq_30227429/article/details/79878660
基于demo上修改 https://dagrejs.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html
方向 rankdir: 'BT' bottom top
节点之间线的距离 ranksep: 200
节点距离 nodesep: 100
直线变为曲线 curve: d3.curveBasis
默认为矩阵 可以变为圆 椭圆 四边形
g.setNode("rect", { shape: "rect" });
g.setNode("circle", { shape: "circle" });
g.setNode("ellipse", { shape: "ellipse" });
g.setNode("diamond", { shape: "diamond" });
<!doctype html>
<meta charset="utf-8">
<title>dagre-v3.4x</title>
<sc
最低0.47元/天 解锁文章
扫一扫
2737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
