前端实现网络拓扑

最新推荐文章于 2025-05-31 09:24:58 发布

曹某在搬砖

最新推荐文章于 2025-05-31 09:24:58 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/C_jian_/article/details/124166687

本文档详细介绍了如何使用Jtopo库在网页中实现网络拓扑图的功能。首先通过引入Jtopo的js文件或npm安装，然后创建Stage和Layer对象，并添加到指定的DOM元素。接着，创建Node节点，设置节点图片，用FoldLink建立节点间的连接，调整线的样式。最后，将节点和连线加入Layer并显示。整个过程简单明了，适合初学者快速上手网络拓扑图的制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.引用jtopo地址

<script src="http://www.jtopo.com/download/jtopo-0.9.9_trial-min.umd.js"></script>

 npm方式
 npm install -D jtopo2

引用后创建元素

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

频繁使用的对象名

var Layer = jtopo.Layer;
var Node = jtopo.Node;
var CircleNode = jtopo.CircleNode;
var FoldLink = jtopo.FoldLink;

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

var stage = new Stage('divId');

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

var layer = new Layer();

将Layer放入到‘场景’中

stage.addChild(layer);

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

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

设置图片

fromNode.setImage('图片地址');

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

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

设置线的样式

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

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

layer.addChild(fromNode);
layer.addChild(toNode);
layer.addChild(link);

按画布居中

stage.translateToCenter();

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

stage.hideToolbar();

最后一步：显示

stage.show();

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