dagre-d3 基于d3.js v4版本以上

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" });

 

Dagre D3 Demo: Tooltip on Hover






    
The TCP state diagram
        (source: RFC 793) with
        hover support. Uses tipsy JS and CSS
        for the tooltip.