前端实现网络拓扑

实现 topo 网络拓扑功能使用Jtopo 地址

1.引用jtopo地址

<script src="/download/jtopo-0.9.9_trial"></script>

 npm方式
 npm install -D jtopo2

引用后创建元素

<div  style="height:100%;width:100%;"></div>

频繁使用的对象名

var Layer = ;
var Node = ;
var CircleNode = ;
var FoldLink = ;

根据一个DIV的id创建顶层对象：Stage

var stage = new Stage('divId');

一个Stage下面可以有多个’层’
Layer 多个Layer可以配合，比如有背景层，有动画层，有交互、展示层等

var layer = new Layer();

将Layer放入到‘场景’中

(layer);

创建一个节点：new Node(‘文本’, x，y，宽度, 高度‘)

var fromNode = new Node('设备1', 200, 200, 48, 48);
var toNode   = new Node('设备2', 200, 200, 48, 48)；

设置图片

('图片地址');

可查看文档定位点
连线 new Link(‘文本’,开始节点,结束节点,定位点，定位点)

new FoldLink 线的类型FoldLink为折现 
var link = new FoldLink('连接Link',fromNode,toNode,'center', 'ct');

设置线的样式

('lineWidth', 2)；
或者 多个样式
({
     'lineWidth': 2,
     'strokeStyle': 'black'
 });

将节点和连线都加入到Layer中

(fromNode);
(toNode);
(link);

按画布居中

();

不显示工具栏(当前版本工具栏样式未打包进去) 可不加

();

最后一步：显示

();

简单的一个拓扑就建造完成了，使用的是文档的demo，更复杂的功能可查看文档根据业务去实现
有问题可评论。

秒客网