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>