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

吐槽君 分类:javascript

需求

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

实现效果

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

file

GoJS 入门

推荐 GoJS 入门学习教程:

  1. GoJS官方文档(点击访问)

无论学习哪种编程语言、第三方库和框架等,最好最快的学习方式都是通过官方的标准入门教程学习。这里介绍下我学习入门知识时在官网中常用到的几个栏目,以及它们对应的功能。
(一)快速入门教程,学习如何使用 GoJS 生成基础图形
file
(二)GoJS 案例库,包含了各种各样类型的图形,在这里找到和你希望生成的图形案例后,把代码挎下来修改是最快的生成图形方式
file
(三)GoJS 图表所有可配置项参数详解,如果需要找对应的某个配置项属性怎么设置,在这里就可以找到
file
(四)GoJS API 列出了所有的实现的类,以及类的描述、属性和方法,根据业务需求在这里查找对应的属性和方法进行操作。例如:点击某个 Group 节点,收起 Group 内的元素,则要找到 Group 类,再找到 collapseSubGraph 方法,查看如何使用。
file
(五)善用论坛搜索功能,一些配置项参数自己找非常麻烦和困难,要相信你遇到的问题其他人也遇到过,直接在官方论坛的搜索功能去搜索,是非常方便的,只要关键词输入正确,搜索出来的结果还是比较满意的(截图页面是在官网中的导航栏 Form 标签项跳转过去的)
file

  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的缩写,这样很方便。如果你的代码中作为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 方法,先判断节点能否展开收起,如果可以,就用该方法的 collapseSubGraphexpandSubGraph 指令,对 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 接口,就能实现。

回复

我来回复
  • 暂无回复内容