使用Jtopo创建一个图形拓扑显示(1)
最近需要根据节点创造一个拓扑图显示功能,网上找了很多拓扑图插件,发现只有一个Jtopo较为符合需求
根据demo ,进行实验测试,先进行显示测试,未来会根据后台数据,进行自动布局编写
首先 创建一个html模板
<html> <head> <title>Jtopo测试</title> </head> <body> <canvas id='canvas' width="850" height="550"> </canvas> </body> </html>
添加 jquery 和jtopo的js引入
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" ></script> <script type="text/javascript" src="http://www.jtopo.com/download/jtopo-0.4.8-min.js" ></script> <script type="text/javascript" src="http://www.jtopo.com/demo/js/toolbar.js" ></script>
最后根据demo 编写运行代码
<script> $(document).ready(function(){ var canvas = document.getElementById('canvas'); var stage = new JTopo.Stage(canvas); //显示工具栏 showJTopoToobar(stage); var scene = new JTopo.Scene(stage); // 节点 function newNode(x, y, w, h, text){ var node = new JTopo.Node(text); node.setLocation(x, y); node.setSize(w, h); scene.add(node); return node; } // 简单连线 function newLink(nodeA, nodeZ, text, dashedPattern){ var link = new JTopo.Link(nodeA, nodeZ, text); link.lineWidth = 3; // 线宽 link.dashedPattern = dashedPattern; // 虚线 link.bundleOffset = 60; // 折线拐角处的长度 link.bundleGap = 20; // 线条之间的间隔 link.textOffsetY = 3; // 文本偏移量(向下3个像素) link.strokeColor = '0,200,255'; scene.add(link); return link; } // 折线 function newFoldLink(nodeA, nodeZ, text, direction, dashedPattern){ var link = new JTopo.FoldLink(nodeA, nodeZ, text); link.direction = direction || 'horizontal'; link.arrowsRadius = 15; //箭头大小 link.lineWidth = 3; // 线宽 link.bundleOffset = 60; // 折线拐角处的长度 link.bundleGap = 20; // 线条之间的间隔 link.textOffsetY = 3; // 文本偏移量(向下3个像素) link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机 link.dashedPattern = dashedPattern; scene.add(link); return link; } // 二次折线 function newFlexionalLink(nodeA, nodeZ, text, direction, dashedPattern){ var link = new JTopo.FlexionalLink(nodeA, nodeZ, text); link.direction = direction || 'horizontal'; link.arrowsRadius = 10; link.lineWidth = 3; // 线宽 link.offsetGap = 35; link.bundleGap = 15; // 线条之间的间隔 link.textOffsetY = 10; // 文本偏移量(向下15个像素) link.strokeColor = '0,250,0'; link.dashedPattern = dashedPattern; scene.add(link); return link; } // 曲线 function newCurveLink(nodeA, nodeZ, text){ var link = new JTopo.CurveLink(nodeA, nodeZ, text); link.lineWidth = 3; // 线宽 scene.add(link); return link; } var from = newNode(100, 60, 30, 30); var to = newNode(300, 60, 30, 30); var link = newLink(from, to, 'Arrow', 5); link.arrowsRadius = 10; var from = newNode(100, 120, 30, 30); var to = newNode(300, 120, 30, 30); var link = newLink(from, to, 'Link'); var from = newNode(100, 200, 30, 30); var to = newNode(200, 300, 30, 30); var link = newFoldLink(from, to, 'FoldLink'); var link = newFoldLink(to, from,'FoldLink', 'vertical', 5); var from = newNode(100, 300, 30, 30); var to = newNode(200, 400, 30, 30); var link = newFoldLink(from, to, 'FoldLink', 'vertical'); var from = newNode(450, 250, 30, 30); var to = newNode(400, 100, 30, 30); var link = newFlexionalLink(from, to, 'FlexLink1'); var from = newNode(600, 100, 30, 30); var to = newNode(650, 200, 30, 30); var link = newFlexionalLink(from, to, 'f', 'vertical', 2); var from = newNode(450, 400, 30, 30); var link = newLink(from, from, 'loop'); var from = newNode(550, 400, 30, 30); var to = newNode(650, 300, 30, 30); var link = newCurveLink(from, to, 'curve'); }); </script>
将内容编写完毕后,即可进行查看。
API 使用说明:
API: jTopo.Node 支持设置宽高,坐标,及文本
function newNode(x, y, w, h, text){ var node = new JTopo.Node(text); node.setLocation(x, y); node.setSize(w, h); scene.add(node); return node; }
创建函数 newNode
根据 x ,y 坐标 w, h 宽高,与具体文本,创建一个 JTopo.Node
添加到显示界面后,即可显示到界面中
API: jTopo.Link 支持自动链接两个node节点中
创建函数 newlink ,可将两个设备进行链接。
// 简单连线 function newLink(nodeA, nodeZ, text, dashedPattern){ var link = new JTopo.Link(nodeA, nodeZ, text); link.lineWidth = 3; // 线宽 link.dashedPattern = dashedPattern; // 虚线 link.bundleOffset = 60; // 折线拐角处的长度 link.bundleGap = 20; // 线条之间的间隔 link.textOffsetY = 3; // 文本偏移量(向下3个像素) link.strokeColor = '0,200,255'; scene.add(link); return link; }