jTopo是我在17年用到过的一款绘制拓扑图的插件，该插件使用yH5 Canvas进行绘制元素以及操作元素，优点在于可实现数据的依赖关系图形化处理，缺点就是使用canvas有时候会出现一些功能难以实现。除此之外，像现在市面上比较流行的Qunee拓扑图插件，如果你的资金准备充足建议使用这款产品，因为该产品的api做的比较详尽，同时ui效果也相比jTopo要好的多，但是如果你想免费使用拓扑图插件的话，jTopo则可以暂时列为你的首选。
废话不多说了，jTopo的官网:http://www.jtopo.com/，下载下最新的js:http://www.jtopo.com/download.html -> jtopo-0.4.8-min.js
官网入门demo1 元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
background: red;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var node = new JTopo.Node("Hello"); // 创建一个节点
node.setLocation(100,100); // 设置节点坐标
scene.add(node); // 放入到场景中
</script>
</body>
</html>
官网入门demo2 图片节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
background: red;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var node = new JTopo.Node("Hello"); // 创建一个节点
node.setLocation(100,100); // 设置节点坐标
node.rotate = Math.random(); // 旋转角度
node.scaleX = Math.random(); // 水平方向的缩放
node.scaleY = Math.random(); // 垂直方向的缩放
node.alpha = Math.random(); // 透明度
node.setImage('img/lbxx.jpeg'); // 设置图片
scene.add(node); // 放入到场景中
</script>
</body>
</html>
官方入门demo3 连线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#canvas{
background: red;
}
</style>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script type="text/javascript" src="js/jTopo/jtopo-0.4.8-min.js" ></script>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
var scene = new JTopo.Scene(stage); // 创建一个场景对象
var nodeFrom = new JTopo.Node("from");
nodeFrom.setLocation(50,50);
scene.add(nodeFrom);
var nodeTo = new JTopo.Node("To");
nodeTo.setLocation(100,100);
scene.add(nodeTo);
var link = new JTopo.Link(nodeFrom, nodeTo); // 增加连线
scene.add(link);
</script>
</body>
</html>