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

<!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">
<script src="tipsy.js"></script>
<!--<link href="https://cdn.bootcss.com/jquery.tipsy/1.0.3/jquery.tipsy.css" 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">source: RFC 793</a>) withhover support. Uses <a href="http://bl.ocks.org/ilyabo/1373263">tipsy JS and CSS</a>for the tooltip.
</section><script id="js">// Create a new directed graphvar g = new dagreD3.graphlib.Graph().setGraph({ rankdir: 'TB' });//  rankdir: 'BT'  bt是bottom 到 top//  rankdir: 'LR'  lr是left 到 right// States and transitions from RFC 793var 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 styleObject.keys(states).forEach(function(state) {var value = states[state];value.label = state;value.rx = value.ry = 5;g.setNode(state, value);});// Set up the edgesg.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 renderervar 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 supportvar 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 graphvar 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>

dagre-d3 基于d3.js v4版本以上相关推荐

dagre-d3 基于d3.js v3版本以上
基于d3 v3 和 v4 的变化 https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187 ...
d3.js html显示图片,d3.js v4：如何在鼠标点击节点后显示图像
在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍. 希望有人能帮助我.d3.js v4:如何在鼠标点击节点后显示图像我试图在鼠标单击图形中的节点时显示图片. 理想情况下,我想单击几个节点并显示图 ...
基于D3.js实现分类多标签的Tree型结构可视化
全文共5270个字,4张图,预计阅读时间25分钟. 关键词: 可视化,D3.js,python,前端,代码 why 今天新来的实习生需要对部分分类文本进行多标签的检测,即根据已构建好的一.二级标签Ex ...
基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
d3 v4版本画基本图
感谢 http://www.ourd3js.com/wordpress/ 提供的技术参考,其中地图的文件china.geojson 下载地址http://www.ourd3js.com/wordpre ...
链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）
一.基于D3.js (自由度高,写起来麻烦) 二.基于neovis.js (基于d3库,简洁,但样式固定,自由度低.) 三.基于neo4jd3.js (融合neovis与d3,数据格式可用d3\neo ...
D3.js(v3版本）
D3.js <script src="https://d3js.org/d3.v6.min.js"></script> import * as d3 fro ...
svg操纵方案基于 D3 还是 angular？
之前还是想简单了, 现在重新写这篇.把逻辑拆分粒度的辨析,放到外面去. 问题提出:svg控制方案基于 D3 还是 angular 根据这个,html 4种展现样式:普通的html,svg,2D ca ...
python 第三方绘图库_D3py首页、文档和下载 - 基于 D3 的 Python 绘图库 - OSCHINA - 中文开源技术交流社区...
D3py 是一个基于 D3 的 Python 绘图库,可以像 D3 那样画出可交互的漂亮图形. D3py 的目的是把来自命令行或者脚本的数据画到浏览器窗口,d3py 通过构建两个优秀的包来实现这一点. ...
d3库(d3.js) 持续整理
d3.js d3.js是基于数据操作文档的js库,集强力可视化组建与数据驱动型的dom操作手法于一身. 本质上是js,在数据可视化方面,d3将生成可视化的步骤精简到了几个简单的函数. 来源:http: ...

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

dagre-d3 基于d3.js v4版本以上相关推荐

最新文章

热门文章