使用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;
}
发表评论