基于 GoJS 实现的拓扑图技术总结

需求

用拓扑图的方式，为用户直观的展示各类资产（数据库设备、安全设备等）本身的运行状态、风险状态，它们之间的连接、数据交互关系，它们的所属组织关系等；

实现效果

GoJS 入门

推荐 GoJS 入门学习教程：

1. [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 接口，就能实现。