关于javascript:基于-GoJS-实现的拓扑图技术总结

66次阅读

共计 6692 个字符，预计需要花费 17 分钟才能阅读完成。

需要

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

实现成果

在线链接地址：https://codepen.io/alfredch3n…

GoJS 入门

举荐 GoJS 入门学习教程：

  1. GoJS 官网文档（点击拜访）

无论学习哪种编程语言、第三方库和框架等，最好最快的学习形式都是通过官网的规范入门教程学习。这里介绍下我学习入门常识时在官网中罕用到的几个栏目，以及它们对应的性能。
（一）疾速入门教程，学习如何应用 GoJS 生成根底图形

（二）GoJS 案例库，蕴含了各种各样类型的图形，在这里找到和你心愿生成的图形案例后，把代码挎下来批改是最快的生成图形形式

（三）GoJS 图表所有可配置项参数详解，如果须要找对应的某个配置项属性怎么设置，在这里就能够找到

（四）GoJS API 列出了所有的实现的类，以及类的形容、属性和办法，依据业务需要在这里查找对应的属性和办法进行操作。例如：点击某个 Group 节点，收起 Group 内的元素，则要找到 Group 类，再找到 collapseSubGraph 办法，查看如何应用。

（五）善用论坛搜寻性能，一些配置项参数本人找十分麻烦和艰难，要置信你遇到的问题其他人也遇到过，间接在官方论坛的搜寻性能去搜寻，是十分不便的，只有关键词输出正确，搜寻进去的后果还是比较满意的（截图页面是在官网中的导航栏 Form 标签项跳转过来的）

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

正文完
javascript
发表至： javascript
2021-03-15
 0
JavaScript设计原则编程技巧及常用设计模式
关于javascript:SAP-智能机器人流程自动化iRPA解决方案分享
关于javascript:浏览器聊聊DOM
vue20学习笔记prop