需要
用拓扑图的形式，为用户直观的展现各类资产（数据库设施、安全设备等）自身的运行状态、危险状态，它们之间的连贯、数据交互关系，它们的所属组织关系等；
实现成果
在线链接地址：https://codepen.io/alfredch3n...
GoJS 入门
举荐 GoJS 入门学习教程：
- GoJS官网文档（点击拜访）
无论学习哪种编程语言、第三方库和框架等，最好最快的学习形式都是通过官网的规范入门教程学习。这里介绍下我学习入门常识时在官网中罕用到的几个栏目，以及它们对应的性能。
（一）疾速入门教程，学习如何应用 GoJS 生成根底图形
（二）GoJS 案例库，蕴含了各种各样类型的图形，在这里找到和你心愿生成的图形案例后，把代码挎下来批改是最快的生成图形形式
（三）GoJS 图表所有可配置项参数详解，如果须要找对应的某个配置项属性怎么设置，在这里就能够找到
（四）GoJS API 列出了所有的实现的类，以及类的形容、属性和办法，依据业务需要在这里查找对应的属性和办法进行操作。例如：点击某个 Group 节点，收起 Group 内的元素，则要找到 Group 类，再找到 collapseSubGraph 办法，查看如何应用。
（五）善用论坛搜寻性能，一些配置项参数本人找十分麻烦和艰难，要置信你遇到的问题其他人也遇到过，间接在官方论坛的搜寻性能去搜寻，是十分不便的，只有关键词输出正确，搜寻进去的后果还是比较满意的（截图页面是在官网中的导航栏 Form 标签项跳转过来的）
- GoJS超具体入门（点击拜访）
GoJS 入门教程中文翻译版本，同时作者还输入了本人的了解，具体地解释了 GoJS 的应用办法和基本原理。这里援用一下文章中我感觉很好的局部内容：
记住GoJS的命名空间是 go，所有的GOJs蕴含的类型都在go这个命名空间下。所有的GoJS的类比方Diagram 、Node 、 Panel 、 Shape 、 TextBlock 都是以go.为前缀的。
这篇文章会举例通知你如何调用go.GraphObject.make来创立一个GoJS对象。更具体的介绍状况请看 Building Objects in GoJS，它应用$作为go.GraphObject.make的缩写，这样很不便。如果你的代码中$示意别的对象，你也能够选一个其它的短变量，比方$$或者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 接口，就能实现。