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>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<!--<script src="../dagre-d3.js"></script>-->
<script src="https://cdn.bootcss.com/dagre-d3/0.6.3/dagre-d3.js"></script>
<!-- Pull in JQuery dependencies -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="tipsy.css" target="_blank" rel="external nofollow" >
<script src="tipsy.js"></script>
<!--<link href="https://cdn.bootcss.com/jquery.tipsy/1.0.3/jquery.tipsy.css" target="_blank" rel="external nofollow" rel="stylesheet">-->
<!--<script src="https://cdn.bootcss.com/jquery.tipsy/1.0.3/jquery.tipsy.js"></script>-->
<h1>Dagre D3 Demo: Tooltip on Hover</h1>
<style id="css">
text {
font-weight: 300;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
font-size: 14px;
}
.node rect {
stroke: #333;
fill: #fff;
}
.edgePath path {
stroke: #333;
fill: #333;
stroke-width: 1.5px;
}
.node text {
pointer-events: none;
}
/* This styles the title of the tooltip */
.tipsy .name {
font-size: 1.5em;
font-weight: bold;
color: #60b1fc;
margin: 0;
}
/* This styles the body of the tooltip */
.tipsy .description {
font-size: 1.2em;
}
</style>
<svg width=960 height=600></svg>
<section>
<p>The TCP state diagram
(<a href="http://www.rfc-editor.org/rfc/rfc793.txt" target="_blank" rel="external nofollow" >source: RFC 793</a>) with
hover support. Uses <a href="http://bl.ocks.org/ilyabo/1373263" target="_blank" rel="external nofollow" >tipsy JS and CSS</a>
for the tooltip.
</section>
<script id="js">
// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'TB' });
// rankdir: 'BT' bt是bottom 到 top
// rankdir: 'LR' lr是left 到 right
// States and transitions from RFC 793
var states = {
CLOSED: {
description: "represents no connection state at all.",
style: "fill: #f77"
},
LISTEN: {
description: "represents waiting for a connection request from any " +
"remote TCP and port."
},
"SYN SENT": {
description: "represents waiting for a matching connection " +
"request after having sent a connection request."
},
"SYN RCVD": {
description: "represents waiting for a confirming connection " +
"request acknowledgment after having both received and sent a " +
"connection request."
},
ESTAB: {
description: "represents an open connection, data received " +
"can be delivered to the user. The normal state for the data " +
"transfer phase of the connection.",
style: "fill: #7f7"
},
"FINWAIT-1": {
description: "represents waiting for a connection termination " +
"request from the remote TCP, or an acknowledgment of the " +
"connection termination request previously sent."
},
"FINWAIT-2": {
description: "represents waiting for a connection termination " +
"request from the remote TCP."
},
"CLOSE WAIT": {
description: "represents waiting for a connection termination " +
"request from the local user."
},
CLOSING: {
description: "represents waiting for a connection termination " +
"request acknowledgment from the remote TCP."
},
"LAST-ACK": {
description: "represents waiting for an acknowledgment of the " +
"connection termination request previously sent to the remote " +
"TCP (which includes an acknowledgment of its connection " +
"termination request)."
},
"TIME WAIT": {
description: "represents waiting for enough time to pass to be " +
"sure the remote TCP received the acknowledgment of its " +
"connection termination request."
}
};
// Add states to the graph, set labels, and style
Object.keys(states).forEach(function(state) {
var value = states[state];
value.label = state;
value.rx = value.ry = 5;
g.setNode(state, value);
});
// Set up the edges
g.setEdge("CLOSED", "LISTEN", { label: "open", curve: d3.curveBasis });
g.setEdge("LISTEN", "SYN RCVD", { label: "rcv SYN", curve: d3.curveBasis });
g.setEdge("LISTEN", "SYN SENT", { label: "send", curve: d3.curveBasis });
g.setEdge("LISTEN", "CLOSED", { label: "close" });
g.setEdge("SYN RCVD", "FINWAIT-1", { label: "close" });
g.setEdge("SYN RCVD", "ESTAB", { label: "rcv ACK of SYN" });
g.setEdge("SYN SENT", "SYN RCVD", { label: "rcv SYN", curve: d3.curveBasis });
g.setEdge("SYN SENT", "ESTAB", { label: "rcv SYN, ACK" });
g.setEdge("SYN SENT", "CLOSED", { label: "close" });
g.setEdge("ESTAB", "FINWAIT-1", { label: "close" });
g.setEdge("ESTAB", "CLOSE WAIT", { label: "rcv FIN" });
g.setEdge("FINWAIT-1", "FINWAIT-2", { label: "rcv ACK of FIN" });
g.setEdge("FINWAIT-1", "CLOSING", { label: "rcv FIN" });
g.setEdge("CLOSE WAIT", "LAST-ACK", { label: "close" });
g.setEdge("FINWAIT-2", "TIME WAIT", { label: "rcv FIN" });
g.setEdge("CLOSING", "TIME WAIT", { label: "rcv ACK of FIN" });
g.setEdge("LAST-ACK", "CLOSED", { label: "rcv ACK of FIN", curve: d3.curveBasis });
g.setEdge("TIME WAIT", "CLOSED", { label: "timeout=2MSL", curve: d3.curveBasis });
// Create the renderer
var render = new dagreD3.render();
// Set up an SVG group so that we can translate the final graph.
var svg = d3.select("svg"),
inner = svg.append("g");
// Set up zoom support
var zoom = d3.zoom()
.on("zoom", function() {
inner.attr("transform", d3.event.transform);
});
svg.call(zoom);
// Simple function to style the tooltip for the given node.
var styleTooltip = function(name, description) {
return "<p class='name'>" + name + "</p><p class='description'>" + description + "</p>";
};
// Run the renderer. This is what draws the final graph.
render(inner, g);
inner.selectAll("g.node")
.attr("title", function(v) { return styleTooltip(v, g.node(v).description) })
.each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); });
// Center the graph
var initialScale = 0.75;
svg.call(zoom.transform, d3.zoomIdentity.translate((svg.attr("width") - g.graph().width * initialScale) / 2, 20).scale(initialScale));
svg.attr('height', g.graph().height * initialScale + 40);
</script>
![ant-design-vue 自定義圖示，關聯阿裡巴巴字型圖示庫[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)