GoJs基本使用示例详解

袁娇然

使用gojs背景

因为公司业务需要，需要完成一个树形的关系图，并且在后续过程中会对树形关系图进行很多的交互来拓展树形图的展示。因此在研究了D3，antV G6，cytoscape和go.js之后，决定使用gojs实现。因为gojs的交互功能封装比较完善，能够很快的搭建出想要的关系图之外，还有很多封装好的交互功能。例如可以使用键盘进行节点的复制和粘贴，通过textEdited属性实现节点内文字的双击编辑等等。

gojs的引入

我们可以直接引入js的方法对gojs进行引入

1. <script src="go.min.js"></script>

复制代码

还可以使用cdn的方式进行使用

1. <script src="https://unpkg.com/gojs/release/go-debug.js"></script>

复制代码

当然也可以通过npm进行安装

1. npm install gojs --save

复制代码

本文档以引入gojs文件的方式，在vue中使用为例。因此我是在index中引入了gojs文件，因为方便去除水印，并且代码的同步。
然后我们就可以gojs进行使用啦，首先我们需要在使用的页面进行引入。

1. <script>
   
2. let $$ = go.GraphObject.make;//因为项目中使用到jquery,所以使用$$进行一个区分
   
3. export default {

复制代码

然后在mounted中对this进行一个接收，以便我们在使用的时候出现this指向错误的问题。

1. mounted(){
   
2.     let _this = this
   
3.     this.$nextTick(()=>{
   
4.        this.init();//gojs实例化方法
   
5.     })
   
6. }

复制代码

和很多可视化框架一样，我们首先要为我们的图形渲染提供一个容器，

1. <div
   
2.     id="myDiagramDiv"
   
3.     style="width:300px;
   
4.     height:300px;">
   
5. </div>

复制代码

然后我们对gojs进行实例化,通过容器的id进行绑定，并且为图形的布局方式设置一个树形布局。

1. init(){
   
2.     this.myDiagram = $$(go.Diagram, "myDiagramDiv",{
   
3.         layout: $$(go.TreeLayout)//布局方式,TreeLayout为树形布局
   
4.     });
   
5. }

复制代码

这样，我们一个简单的画布就已经初始化完成了。然后我们在画布中加入一些相数据

1. this.myDiagram.model = new go.Model(
   
2.   [
   
3.     { key: "1" },
   
4.     { key: "1-1" },
   
5.     { key: "1-2" }
   
6.   ],
   
7.   [
   
8.     {form:"1",to:"1-1"},
   
9.     {form:"1",to:"1-2"},
   
10.   ]);

复制代码

然后一个简单的树形布局的图形就出来了

在执行new go.Model的时候，其传入的两个参数分别为节点数据和连线数据，在这里我们称之为nodes和links，其中nodes中包括key（必须，节点的唯一标识）和其他字段（主要是存储一些节点的配置项，比如节点的number数据或者其他需要在节点内显示的文字和图表等），而links包括from（必须，连线的出发节点的key）和to（必须，连线的结尾节点的key）字段和其他字段（比如连线上的关系文字说明），其中节点通过key来标识，因此我们要求数据的key必须唯一。不然的话，link数据在匹配出发节点和结束节点的会匹配到nodes数据中key值相同后面的节点，而nodes数据中key值相同的面的数据节点会生成一个游离的节点，因此不符合我们的需求。并且因为属性布局的特殊结构，我们还可以parent字段来处理一下数据。

1. this.myDiagram.model = new go.TreeModel(
   
2.     [ // the nodeDataArray
   
3.         { key: "1" },
   
4.         { key: "1-1", parent: "1" },
   
5.         { key: "1-2", parent: "1" }
   
6.     ]);

复制代码

可以根据自己的实际需求进行选择性进行哪种方式渲染方式。

去除水印

当然你应该也发现了，图像渲染的画布上会出现gojs的版本信息和介绍等等水印，而去除这些水印是需要氪金的，然而我们还有一些其他方法能对水印进行去除，我们在下载的go.min.js中全局搜索7eba17a4ca3b1a8346找到a.ir或者a.jv等，因为版本的不一样属性的名字也会发生改变

1. a.ir=b.W[Ra("7eba17a4ca3b1a8346")][Ra("78a118b7")](b.W,ok,4,4);

复制代码

然后把这段代码替换为

1. a.ir=function(){return true;};

复制代码

只要保证属性名一致就可以，然后重启我们的项目就可以清除水印啦。
在下篇文章中我们会通过

1. this.myDiagram.nodeTemplate

复制代码

中的通过TextBlock、shape、Picture、Groups、Panel和界面的布局来对我们的节点进行丰富而显示出各种各样并且显示内容不同的的节点类型。
以上就是GoJs基本使用示例详解的详细内容，更多关于GoJs基本使用的资料请关注晓枫资讯其它相关文章！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

符和平

感谢楼主分享。