通过JTopo.js在网页绘制网络拓扑图

项目中遇到要在网页中绘制网络拓扑图的需求，要求节点具备点击、拖拽、缩放等交互功能，并且可以显示/隐藏详细信息，数据是设备实时上报来的。

综上，用画拓扑图的工具画一张固定的图片偷懒显然是不行的，最好是找到一个封装好的js库可以直接使用。

JTopo 是一款完全基于HTML5 Canvas的数据关系+交互式图形库。可以快速创建一些拓扑关系图。项目的完整效果不能展示，自学过程中完成的demo的效果图如下，我将在下面介绍该js库的入门使用和一些功能的实现方法。

说明

1.该文章只相当于一个学习笔记，记录了我在项目中使用到的功能和知识点，并没有覆盖JTopo的所有内容，比如自动布局。分享出来希望能帮助有类似需求的人快速完成任务。有兴趣可以自己去官网进行深入学习。

2.官网提供了大量demo，并且支持在线修改和运行，非常方便。唯一缺点就是有些注释不够详细，需要不停的试来确定某些方法和参数的意义。我的demo也是参照官网上的demo，自己练习时写的，不保证性能。

一、工具的选择

1.经过在网上搜索，首先找到了一个叫Qunee的，感觉非常合适，然而这个库是收费的，以个人开发者申请还需要签非盈利的协议，只能放弃。有兴趣的可以自己区官网看一看www.qunee.com。

2.然后又找到一个叫D3（Data-Driven Documents）的，是一款很好的做数据可视化的js库，而且免费。唯一小缺憾是自由度很高，所以相对于一些开箱即用、API很简单的库来说自学难度稍微高一些。准备有时间了自学一下。官网是D3.js - Data-Driven Documents。

3.最后在单位旧项目的代码中找到了实现类似功能的js库，叫JTopo，搜了一下是开源免费的，看了一下demo很好上手，果断选择该工具实现功能。

二、准备工作

Github链接： GitHub - wuln/jTopo: draw the network topology by javascript

Github上有一个demo，包含html、js、css和图片，但是时间显示是5年前了，下载下来之后对照着官网最新的文档发现很多方法、关键字都不相同，参考价值不大。

官方网站 jtopo 一个好用的交互式HTML5图形库

离线JS文件下载地址 jtopo 更新下载

三、入门程序

使用时把js文件的地址换成自己的地址。

<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jtopo-1.0.4_trial-min.umd.js"></script>
</head>
<body><!-- 用于渲染显示的div --><div id="divId" style="height:600px; width:600px;"></div><script>// 频繁用到的对象名字先导入，减少打字数var Stage = jtopo.Stage;var Layer = jtopo.Layer;var Node = jtopo.Node;var Link = jtopo.Link;// 根据一个DIV的id创建顶层对象：Stage// 注：'divId' 需换成你页面实际的div的id或者dom对象var stage = new Stage('divId');// 一个Stage下面可以有多个'层',Layer// 多个Layer可以配合，比如有背景层，有动画层，有交互、展示层等var layer = new Layer();// 一般步骤，将Layer放入到‘场景’中stage.addChild(layer);// 创建一个节点：new Node('文本', x，y，宽度, 高度)';// 所有参数都是可选项，也可以稍后赋值var fromNode = new Node('From', 200, 200, 48, 48);// 设置图片fromNode.setImage('imgs/server_icon.png');// 创建另一个节点var toNode = new Node('To');// x,ytoNode.setXY(400, 200);// 大小toNode.resizeTo(48, 48);toNode.setImage('imgs/server_icon.png');// 连线 new Link('文本',开始节点,结束节点);var link = new Link('Link', fromNode, toNode);// 设置样式：粗细link.setStyles('lineWidth', 2);// 将节点和连线都加入到Layer中layer.addChild(fromNode);layer.addChild(toNode);layer.addChild(link);// 按画布居中stage.translateToCenter();// 最后一步：显示stage.show();</script>
</body>
</html>

入门程序的效果图如图所示，默认具有选中高亮效果并且节点可以拖拽。

四、核心对象介绍

jtopo的核心对象之间存在层级结构。

1. 顶层对象（Stage）

最顶层的为Stage，管理一个或者多个Layer，可以对Layer进行管理：添加、移除。并且提供一些常规性的交互功能，比如：鼠标缩放、视图模式变换（普通、框选、拖拽、编辑、锁定）、按画布居中、导出图片等功能。

2. 层对象（Layer）

Layer 是一个抽象对象，默认是完全透明的，上层对象为Stage。一个Layer下面可以有多个Node、Link对象，Node、Link对象只有放入Layer后才可能被绘制出来。Layer的frames属性用来设置绘制帧率，即每秒的重绘次数。

Layer 可以被平移、缩放，用户可以通过鼠标在画布上的拖拽和鼠标滚轮完成，也可以通过API来修改Layer的x、y坐标和缩放系数scaleX和scaleY实现同等效果。

一个Layer对象对应一个Canvas，多个Layer常用于画面逻辑分层，比如有的层绘制速度较慢，有的层绘制速度较快，有的层作为背景层，有的作为动画层。

需要通过Stage对象的addChild方法放入Stage中。

3. 节点对象（Node）

用户操作的核心两个对象Node 、Link之一。

Node默认是一个矩形，有坐标（x，y）和宽高尺寸（width、heigh）。

可以指定一个文本字符串，默认显示在中矩形的下面。

外观可以通过setStyles方法设置，核心的外观属性有：边框颜色、填充颜色、字体颜色、字体（大小、加粗等CSS Font支持的都可以）、圆角。

需要通过Layer对象的addChild方法放入Layer中。

4.连线对象（Link）

用户操作的核心两个对象之一。

Link是连线，有起始点和结束点，一般用来表示关系、流向等。

可以指定一个文本字符串，默认显示在连线的中间。

外观同样通过setStyles方法设置，核心的外观属性有：颜色、线条粗细、字体颜色、字体（大小、加粗等CSS Font支持的都可以）。

和Node一样需要放入Layer中。

五、文本和定位

文字定位由三个核心属性控制：1. 位置 2. 文本对齐方式 3. 文本基线

1.位置

节点文本的位置默认为‘cb’

线在连接时用的表明位置的关键字也是这些，额外再加一个‘edge’。‘edge’表明线连在端点的边上，具体连接点由两个端点的相对位置决定。

2.文本对齐方式

3.文本基线

4.自定义偏移量

通过textOffsetX和textOffsetY属性自定义偏移量。

六、事件处理

和js的事件绑定、删除一样，这里不再介绍。

七、动画效果

1.位置计算

Node 或 Link对象有一个getPoint(t)方法, t取值范围:[0-1]，可以获取对象上某一点的坐标。

对于Node的来说，一周就是0-1，对于Link来说从起点到终点就是0-1。

2.以移动动画效果为例

//创建一个小球沿着线移动
var ball = new jtopo.CircleNode(null, 0, 0, 10);
ball.setStyles({'fillStyle': 'red','lineWidth': 2
});
layer.addChild(ball);
//Animation.circle表示一个来回
//前两个参数分别表示起点和终点位置
//第三个参数表示从起点到终点的时间，单位是ms      
jtopo.Animation.circle(0, 1, 5000, function(t) {
var p = link3.getPoint(t); //随着时间推移不断获取线上的点ball.text = '' + t.toFixed(1);ball.translateCenterTo(p.x, p.y); //将获取的位置赋给小球，达到移动的效果
}).start().repeat(10); //start表示开始动画，repeat表示重复次数

上述代码中的注释详细说明了方法的使用和参数的意义

一开始展示的demo中还通过对Link对象添加动画实现了信息的流向效果和线的呼吸效果。完整代码已上传至网站资源，链接为通过JTopo.js在网页绘制网络拓扑图-Javascript文档类资源-CSDN下载