基于 GoJS 实现的拓扑图技术总结
需求
用拓扑图的方式，为用户直观的展示各类资产（数据库设备、安全设备等）本身的运行状态、风险状态，它们之间的连接、数据交互关系，它们的所属组织关系等；
实现效果
GoJS 入门
推荐 GoJS 入门学习教程：
- [GoJS官方文档]gojs.net/latest/learn/index.htm
无论学习哪种编程语言、第三方库和框架等，最好最快的学习方式都是通过官方的标准入门教程学习。这里介绍下我学习入门知识时在官网中常用到的几个栏目，以及它们对应的功能。
（一）快速入门教程，学习如何使用 GoJS 生成基础图形
（二）GoJS 案例库，包含了各种各样类型的图形，在这里找到和你希望生成的图形案例后，把代码挎下来修改是最快的生成图形方式
（三）GoJS 图表所有可配置项参数详解，如果需要找对应的某个配置项属性怎么设置，在这里就可以找到
（四）GoJS API 列出了所有的实现的类，以及类的描述、属性和方法，根据业务需求在这里查找对应的属性和方法进行操作。例如：点击某个 Group 节点，收起 Group 内的元素，则要找到 Group 类，再找到 collapseSubGraph 方法，查看如何使用。
（五）善用论坛搜索功能，一些配置项参数自己找非常麻烦和困难，要相信你遇到的问题其他人也遇到过，直接在官方论坛的搜索功能去搜索，是非常方便的，只要关键词输入正确，搜索出来的结果还是比较满意的（截图页面是在官网中的导航栏 Form 标签项跳转过去的）
GoJS 入门教程中文翻译版本，同时作者还输出了自己的理解，详细地解释了 GoJS 的使用方法和基本原理。这里引用一下文章中我觉得很好的部分内容：
> 记住GoJS的命名空间是 go，所有的GOJs包含的类型都在go这个命名空间下。所有的GoJS的类比如Diagram 、Node 、 Panel 、 Shape 、 TextBlock 都是以go.为前缀的。
这篇文章会举例告诉你如何调用go.GraphObject.make来创建一个GoJS对象。更详细的介绍情况请看 Building Objects in GoJS，它使用KaTeX parse error: Expected 'EOF', got '作' at position 1: 作̲为go.GraphObject…表示别的对象，你也可以选一个其它的短变量，比如$$或者MAKE或者GO.
图表和模型
图表(Diagram)的节点(Node)和链接(Link)是模型管理下的可视数据。GoJS支持模型-视图构架，当模型包含描述节点和链接的数据（Javascript的数组对象）。而且图表使用视图的方式来表现数据中的节点和链接对象。我们加载、编辑、保存的是模型而不是图表。你在模型的数据对象中添加你的APP需要的属性，而不是去修改Diagram 和GraphObject 类的原型。
本文以下内容皆默认您已经掌握了 GoJS 的入门知识。
拓扑图的数据结构
在 GoJS 中，只要把一个包含描述节点和链接的数据绑定到 GoJS 的图表 Model 上，那么图表便会以视图的方式来表现数据中的节点和链接对象。所以，只要我们按照指定的格式构建好图表数据对象，就可以让 GoJS 自行渲染出图表了。以下是构建好的图表数据对象例子：
// 拓扑图数据
var topoChartData = {
// 所有节点数据
"nodeDataArray": [
{
"key": "root", // 节点的唯一标识
"category": "root", // 节点类型
// 把 节点类型 当做属性名，对应的属性值是节点独有的一些数据
"root": {
"name": "根节点", // 节点独有的数据——名称
},
}
],
// 所有连接线数据
"linkDataArray": [
{
"from": "52d59c8d-1f8b-4405-8036-dfe51e8419f1", // 连接线的源节点
"to": "node67", // 连接线的目标节点
"category": "layerThreeLinkInfo", // 连接线类型
}
],
};
定义好图表 Model 的数据后，就以该数据对象为基础，一步步配置图表参数，把图表打造成我们想要的样子。
具体实现
初始化图表
初始化图表，需要指定一个 DOM 元素让其挂载上去，根据需求，配置图表的基础参数，具体内容代码如下：
let vm = this;
let dom = document.getElementById('topo-chart');
// 实例化一个 GoJS 的图表类，配置基础参数
vm.diagram = $(go.Diagram, dom,
{
layout: $(go.TreeLayout), // 主体布局为树形结构
maxSelectionCount: 1, // 选中的节点最多为 1 个
'toolManager.hoverDelay': 10, // 鼠标悬浮提示框显示延迟时间
// allowMove: false, // 不允许拖拽元素
allowClipboard: false, // 不允许复制粘贴
allowDelete: false, // 不允许删除
});
自定义节点模板样式
这一部分是开发过程中比较枯燥但是需要花费时间较多的一部分，要把节点的样式配置成与 UI 图相符的样子，就需要大量调试，找到正确的节点模板属性配置，需要对各类型的节点属性有相当的了解。
这里只列出 根节点 这一种需要配置的节点模板，以及配置方法，其他节点模板配置方式类似。
首先，使用 nodeTemplateMap.add 方法增加一种自定义模板类型，第一个参数会与图表数据对象（不懂图表数据对象的，回头看文章）中，属性 category 值为 ‘root’ 的节点匹配和应用。第二个参数，就是使用 go.GraphObject.make 即 $ 函数，生成该模板中所有的节点元素了。go.GraphObject.make 详细用法请看官方文档，这里的使用主要是配置了节点元素样式，使用 go.Binding 方法绑定了图表数据对象中的节点名称数据。
// 根节点模板（模板是 gojs 提供的控制节点显示样式的 api）
// 使用 add 方法添加模板，会以方法的第一个参数匹配节点数据的 category 属性，只有匹配的节点模板才生效
vm.diagram.nodeTemplateMap.add('root', $(go.Node, 'Auto',
{ selectionAdorned: false, },
// 图片背景
$(go.Picture,
{
desiredSize: new go.Size(153, 133),
source: '/static/images/topo-manage/root-icon.svg',
},
),
// 文字
$(go.TextBlock,
{
margin: new go.Margin(0, 0, 10, 0),
stroke: '#fff',
width: 90,
font: '14px Microsoft YaHei',
alignment: go.Spot.BottomCenter,
textAlign: 'center',
maxLines: 2,
overflow: go.TextBlock.OverflowEllipsis,
toolTip: $('ToolTip',
{
'Border.fill': '#021026',
'Border.stroke': '#12409E',
'Border.parameter1': 4,
},
$(go.TextBlock,
{ margin: 4, stroke: 'white', },
new go.Binding('text', '', model => model[model.category].name),
),
),
},
// 使用 Binding 方法绑定 节点数据 到此节点的 某个属性，这里绑定了 text 属性
new go.Binding('text', '', model => model[model.category].name),
),
));
自定义连接线模板样式
这一部分与上面的节点模板样式配置类似，不多赘述。
// 连接线默认模板
vm.diagram.linkTemplate = $(go.Link,
{
selectable: false,
routing: go.Link.Orthogonal,
},
$(go.Shape, { stroke: '#3386FF', }),
);
动态高亮和显示连接线
动态显示连接线用到了 GoJS 的 API，大概操作逻辑是这样的：首先对图表添加节点选中监听事件，如果点击了一个节点，先把所有的节点取消高亮、连接线隐藏，然后再根据点击的节点，高亮需要高亮的节点，显示需要显示的连接线。
// 添加节点选中监听事件
this.diagram.addDiagramListener('ChangedSelection', () => {
vm.updateHighlights();
});
// 绘制连接的节点样式和线
updateHighlights() {
let vm = this;
// 获取选中的节点（图表设置了最多只能选择一个节点，即 first() 取到的节点是当前选中的节点）
let sel = vm.diagram.selection.first();
if (sel === null) return false;
// 设置所有节点为未选中状态
if (sel.data.category === 'devInfo' || sel.data.category === 'devNotConfigInfo' || sel.data.category === 'dbInfo') {
vm.diagram.nodes.each(node => {
node.isHighlighted = false;
});
// 设置能力单元连接线初始值为隐藏
vm.diagram.links.each(link => {
if (link.data.category === 'devInfo' || link.data.category === 'devNotConfigInfo') {
let shp1 = link.findObject('dev-link-shape');
let shp2 = link.findObject('dev-link-toArrow');
shp1.visible = false;
shp2.visible = false;
}
});
}
// 根据选中的节点分别设置相关的节点和连接线高亮
vm.showDevLink(sel);
vm.highlightNode(sel);
},
/**
* 显示隐藏的能力单元连接线，x 为当前选中的节点
* @param x
*/
showDevLink(x) {
if (x instanceof go.Node) {
// 选择的是能力单元节点
if (x.data.category === 'devInfo' || x.data.category === 'devNotConfigInfo') {
// 所有 从该节点出去 的线设置为显示
x.findLinksOutOf().each(link => {
let shp1 = link.findObject('dev-link-shape');
let shp2 = link.findObject('dev-link-toArrow');
shp1.visible = true;
shp2.visible = true;
});
}
// 选择的是资产节点
if (x.data.category === 'dbInfo') {
x.findLinksInto().each(link => {
// 所有 指向该节点 的线设置为显示
let shp1 = link.findObject('dev-link-shape');
let shp2 = link.findObject('dev-link-toArrow');
shp1.visible = true;
shp2.visible = true;
});
}
}
},
// 高亮选中节点连接的节点背景
highlightNode(x) {
if (x instanceof go.Node) {
// 选择的是能力单元节点
if (x.data.category === 'devInfo' || x.data.category === 'devNotConfigInfo') {
// 所有 目标节点 设置高亮样式
x.findNodesOutOf().each(node => {
node.isHighlighted = true;
});
}
// 选择的是资产节点
if (x.data.category === 'dbInfo') {
// 所有 源节点 设置高亮样式
x.findNodesInto().each(node => {
node.isHighlighted = true;
});
}
}
},
展开收起 Group 节点
展开收起 Group 节点，也是使用了 GoJS 的 API，通过 diagram.commandHandler 方法，先判断节点能否展开收起，如果可以，就用该方法的 collapseSubGraph 和 expandSubGraph 指令，对 Group 节点执行展开收起动作。
/**
* 展开/收起点击的二级部门节点
* @param e 输入事件，鼠标或键盘触发
* @param obj 当前点击的节点对象
* @param type 指定 展开/收起 操作
*/
clickDepartTwo(e, obj, type) {
let group = obj.part;
// 判断节点是否是 Group 节点
if (group instanceof go.Adornment) group = group.adornedPart;
if (!(group instanceof go.Group)) return;
// 判断有没有图层
let diagram = group.diagram;
if (diagram === null) return;
// 判断节点能否收起/展开
let cmd = diagram.commandHandler; // 获取图层指令
if (group.isSubGraphExpanded) {
if (!cmd.canCollapseSubGraph(group)) return; // 如果 group 不能收起，return
} else {
if (!cmd.canExpandSubGraph(group)) return; // 如果 group 不能展开，return
}
// 如果指定了 type，则按 type 与 节点当前展开状态 来决定展开/收起
if (type) {
if (type === 'collapse' && group.isSubGraphExpanded) {
cmd.collapseSubGraph(group); // 收起
} else if (type === 'expand' && !group.isSubGraphExpanded) {
cmd.expandSubGraph(group); // 展开
}
} else { // 如果未指定 type，则按 节点当前展开状态 来决定展开/收起
if (group.isSubGraphExpanded) {
cmd.collapseSubGraph(group); // 收起
} else {
cmd.expandSubGraph(group); // 展开
}
}
},
绑定图表 Model
经过以上一系列的配置，图表的自定义样式和行为就完成了，最后一步，只需要把图表数据对象绑定到图表 Model 上，即可大功告成！
// 更新拓扑图数据
updateModel: function (val) {
let vm = this;
// gojs 官网绑定 model 的示例代码
if (val instanceof go.Model) {
// 如果传入的 val 是 go.Model 类，可以直接绑定到 model
vm.diagram.model = val;
} else {
// 构建一个 model 对象，把拓扑图数据绑定到此对象
let m = new go.GraphLinksModel();
if (val) {
for (let p in val) {
if (val.hasOwnProperty(p)) {
m[p] = val[p];
}
}
}
// 绑定到 model
vm.diagram.model = m;
}
},
总结
本文针对拓扑图的需求，采用了 GoJS 来实现，先学习了 GoJS 的入门知识，再根据需求构建了图表数据对象，配置了各类节点和连接线的模板样式，实现了动态高亮节点和显示连接线、展开收起 Group 节点的方法，最后把图表数据对象绑定到了图表 Model 上，实现了拓扑图功能。
拓扑图一开始的需求和设想是非常复杂和宏大的，不仅要展示复杂的数据，甚至还可以像网络拓扑一样，随意拖拽更改节点之间的连接、从属等关系。目前版本实现的拓扑图，只是实现了数据可视，并没有实现拖拽保存功能。如果想要继续开发，实际上 GoJS 是完全可以实现的，官网本身也有拓扑图相关的例子，只要掌握相关的 API 接口，就能实现。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
