文章目录
前言
我自己了解到的绘制拓扑图的开源库有vis和阿里的G6，G6在项目中没机会使用，只用到的vis，有时间再玩一下G6，G6好像比vis功能强大一些，下面主要说一下vis。
vis与vis-network认识
我接手拓扑项目时，项目中使用的是vis。现场反馈一个需求，说是要自定义线条的箭头。我在官网上看到可以进行自定义箭头，但是一使用就是报错，很是郁闷不理解。
在查阅大量资料后，发现有demo竟然没有完全引入vis，单独引入了vis框架中的一个vis-network，也可以成功绘制拓扑图。紧接着去研究vis与vis-network的区别，研究发现vis-network是vis框架中的一个功能组件，主要是用来绘制拓扑图，而且拓扑项目中也只使用到了vis框架中的绘制拓扑图功能。于是在项目中将vis更换成最新版本的vis-network，并进行自定义箭头的尝试，发现可以进行自定义箭头，满足项目的需求。
因此我建议如果项目中只使用到了绘制拓扑图能力时，只引入vis-network即可，这样引入的包体积减小，可使用的功能更多。
npm install vis-network@9.1.0 (安装的是 ^9.1.0 版本) 当时network的最新版本
// 这里最好使用ESModule的模块引入方式，这里我不修改了，有使用到自己研究修改
const vis = require("vis-network/dist/vis-network.min.js"); // vis-network 引入方式
vis-network使用排坑
- 使用vis-network不要使用vis，首先是vis是多个功能板块的集合，项目中只会使用到其中的vis-network；还有虽然vis-network包含在vis中，但是有些功能在vis中无法使用，使用了就会报错。如线条的箭头图标改为image类型。
- vis-network绘制出来后，激活拓扑图会自带outline，但是找不到哪个元素添加的outline,需添加以下代码：* { outline: none; }
- nodes节点模块，使用title时，需自己手调样式，否则页面上不会展示。
::v-deep .vis-tooltip {position: absolute;visibility: visible;} - 可视化操作模块manipulation，在vis-network中使用会报错，目前不知道原因，可能是版本问题。在vis中可以使用，需要自己调样式，而且感觉这个可视化操作不怎么好用，用处不大。
- 放大缩小按钮等需自己手调样式才会展示，都是拓扑图中自带的，只是因为样式问题没有显示出来。
- 拓扑图分层级时，同层级从左往右的节点顺序：①当节点无x轴坐标时，与edges线条数组中的连接顺序有关。②当有x轴坐标时，以坐标值大小为准。
vis-network配置
配置有很多，直接写一个小案例放上配置吧。
<template>
<div id="mynetwork" ref="mynetwork"></div>
</template>
<script>
const vis = require("vis-network/dist/vis-network.min.js");
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
nodes: null,
edges: null,
options: null,
network: null,
}
},
created() {
this.nodes = new vis.DataSet([ // nodes是节点
{id: 1, label: 'Node 1',level: 1},
{id: 2, label: 'Node 2',level: 2},
{id: 8, label: 'Node 8',level: 2},
{id: 9, label: 'Node 9',level: 2},
{id: 10, label: 'Node 10',level: 2},
{id: 3, label: 'Node 3',level: 2},
{id: 4, label: 'Node 4',level: 3},
{id: 5, label: 'Node 5',level: 3},
{id: 6, label: 'Node 6',level: 4},
{id: 7, label: 'Node 7',level: 5},
]);
this.edges = new vis.DataSet([ // edges是线
{from: 1, to: 2}, // 决定了节点从左往右的顺序
{from: 1, to: 3},
{from: 1, to: 8},
{from: 1, to: 9},
{from: 1, to: 10},
{from: 2, to: 4},
{from: 2, to: 5},
{from: 5, to: 6},
{from: 6, to: 7},
]);
},
mounted() {
this.init()
},
methods: {
init() {
const container = this.$refs.mynetwork;
const data = {
nodes: this.nodes,
edges: this.edges
}
this.options = {
autoResize: true, // 默认true,自动调整容器的大小
height: '100%', // 默认值
width: '100%', // 默认值
locale: 'cn', // 选择语言，默认英文en，cn为汉语
locales: { // 语言格式化对象
cn: {
edit: '编辑',
del: '删除',
back: '返回',
addNode: '添加节点',
addEdge: '添加连线',
editNode: '编辑节点',
editEdge: '编辑连线',
addDescription: '点击空白区域添加节点',
edgeDescription: 'Click on a node and drag the edge to another node to connect them.',
editEdgeDescription: 'Click on the control points and drag them to a node to connect to it.',
createEdgeError: 'Cannot link edges to a cluster.',
deleteClusterError: 'Clusters cannot be deleted.',
editClusterError: 'Clusters cannot be edited.',
},
},
// 配置模块
configure: {
enabled: false, // false时不会在界面上出现各种配置项
},
// 节点模块
nodes: {
chosen: true, // 对选择节点做出反应
color: {
border: '#2B7CE9',
background: '#97C2FD',
highlight: {
border: '#2B7CE9',
background: '#FFEC8B'
},
hover: {
border: '#2B7CE9',
background: '#FFC125'
}
},
font: {
align: 'left',
color: '#FFC125',
size: 12
// vadjust: 10, // 标签文本的垂直位置，值越大离节点越远
},
labelHighlightBold: false,
// hidden: true, // 为true不会显示节点。但仍是物理模拟的一部分
shape: 'image',
image: { // 路径问题要注意，一定要存储在静态文件夹中
unselected: '/static/images/icon_normal.svg',
selected: '/static/images/icon_selected.svg',
},
size: 25, // 节点大小
physics: false, // 关闭物理引擎
title: '哈哈哈', // 用户悬停在节点上时显示的标题,可以是HTML元素或包含纯文本或HTML的字符串
widthConstraint: { // 节点的最小宽度与最大宽度
// maximum: 100,
}
},
// 边模块
edges: {
// label: '哈哈哈',
physics: false,
smooth: {
enabled: true,
type: 'curvedCCW', // 平滑曲线的类型
forceDirection: 'horizontal' // 用于分层布局的配置项,可选值有: ['horizontal', 'vertical', 'none']
},
// arrows: { // 这里可以用来自定义箭头，type为image类型即可
// middle: { enabled: true, type: 'image', imageHeight: 12, imageWidth: 12, src: getOpticalRed() }
// },
},
// 交互模块
interaction: {
hover: true, // 启用鼠标悬停
hoverConnectedEdges: false, // 鼠标悬停在节点上时，与其连接的边不高亮显示
hideEdgesOnDrag: false, // true时拖动视图时不会绘制边。这会加快拖动时的响应速度
hideNodesOnDrag: false, // true时拖动视图时不会绘制节点
navigationButtons: true,
selectConnectedEdges: false, // 选中节点时，与其连接的边不高亮
multiselect: false, // true时长时间单击（或触摸）以及控件单击将添加到选择中
tooltipDelay: 100,
},
// 可视化操作: 没起作用，不知道是不是版本的问题
manipulation: {
enabled: false,
initiallyActive: true,
addNode: true,
addEdge: true,
// editNode: undefined,
editEdge: true,
deleteNode: true,
deleteEdge: true,
controlNodeStyle:{
// all node options are valid.
}
},
// 物理引擎
physics: {
enabled: true,
barnesHut: {
gravitationalConstant: -20000, // 斥力
springLength: 20, // 弹簧长度
avoidOverlap: 1,
},
maxVelocity: 50,
minVelocity: 1,
stabilization: {
iterations: 500, // 最大迭代次数
enabled: true,
// fit: true,
fit: false, // 值为false时，点击刷新后可回到刷新前的页面
},
},
// 布局
layout: {
randomSeed: 2000,
hierarchical: {
enabled: true,
levelSeparation: 100, // 层级之间的距离,太小的话箭头会盖住标签字
nodeSpacing: 100, // 节点之间的距离
treeSpacing: 100, // 树之间的距离
sortMethod: 'directed',
},
},
}
this.network = new vis.Network(container, data, this.options);
setTimeout(() => {
this.nodes.update({id: 9, label: '更新后的9'})
},10000)
}
}
}
</script>
<style scoped lang="less">
#mynetwork {
width: 80%;
height: 60%;
border: none;
::v-deep .vis-navigation {
position: absolute;
z-index: 2;
right: 12px;
top: 47.8%;
.vis-zoomIn,
.vis-zoomOut {
width: 24px;
height: 24px;
margin: 4px;
cursor: pointer;
border: 1px solid #c0c0c0;
border-radius: 2px;
border-radius: 2px;
&:hover {
border-color: #ccc;
color: #4d4d4d;
}
}
}
::v-deep .vis-tooltip {
position: absolute;
visibility: visible;
}
}
</style>
开发时注意的功能点
1.性能问题
拓扑图性能问题很严重，官网上明确说了最多只支持几千个节点的同时展示，我试了一下，展示的节点很多时，页面操作非常卡顿。
所以在前期设计时要格外考虑性能问题，后面因为性能问题重写了好几版代码结构，都是泪。
2.是否有环路情况
我做的项目在定位时是不考虑环路的情况的，所以当时做了树状图和星状图是用的一套数据。后面听说加了要支持环路的需求，那之前的设计根本没法玩了，要全部推倒。我也不负责此拓扑项目了，不清楚后续如何设计的，所以在前端设计时也要考虑好自己项目的定位与应用场景。
3.位置保存还是状态保持
所谓的位置保存就是将每个节点的x与y轴值传给后端进行数据库保存，每次渲染时节点都会出现在相同的位置。
状态保持是不进行位置保存，只是在前端进行维护一份位置数据，保证在用户关闭浏览器之前，每个节点的相对顺序是保持不变的。
当时主要考虑到进行位置保存时，节点的首次渲染与新增节点渲染处理逻辑较为复杂，尤其在树状图模式下，位置没有任何意义了，就使用了状态保持的处理逻辑。
4.展开收缩
当使用树状图时，层级很深时很难分析拓扑状态，最好是可以增加展示收缩节点功能，可以进行缩放与展开层级，此功能很好用，也可以解决一下性能问题，使页面上展示的节点数不至于很多，进行性能优化。展开收缩的实现也不难，就是初始做一个判断，在需要进行展开收缩的节点上绘制一个展开收缩按钮，并加上自己封装的展开收缩功能。
5.分页器
有展开收缩功能，那当然少不了左右翻页的分页器了，实现逻辑和展开收缩类型，很好实现。
6.节点是否可拖动
当节点可拖动时，要考虑到分页器的绘制了，分页器要始终绘制在最左侧和最右侧的节点旁边的。
好在节点拖动时拓扑图是不断重绘的(就是canvas的重绘)，可以封装一个公共函数进行分页器的绘制。
7.编辑拓扑关系
只有展示拓扑关系的功能显示是不够的，还要具有可编辑性，具体的编辑功能还要看如何进行设计的，需要什么样的场景。
总结
还有太多的点就暂时不说了，只是说了一些拓扑绘制实现思路，没有说实现的详细代码，有兴趣的可以一起讨论如何用代码进行实现，我感觉我编写的代码需要优化，不怎么好，还是经验不足。
874
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
