Gojs 快速入门

一、前言

Gojs提供了很多API给我们使用，下面只是提供完成关系图表（如下图）的某种方法，用其他方法也可以实现同样的效果。

二、准备图表数据

1、节点数据：

2、关系数据：

三、开始画图

由上图可以分析得到，图表由节点、文字、线、箭头组成。

1、创建图表

2、新建节点

3、设置线条和箭头

4、其他设置

5、新建关系图

这里只是简单介绍如何快速完成一个关系图，当然如果你想改成树形图或者改箭头为闭合，改形状为圆形，插入图片等等，强大的gojs都能帮你实现，而且有完善的api和例子可以参考。

参考链接：

https://gojs.net/latest/index.html

https://gojs.net/latest/intro/viewport.html

你说的是HTML DOM？还是Jquery DOM?不同的dom对应的内容是不一样的，绝对不能混合使用。不过从你说到节点来看，应该是HTML DOM。根据我的理解，先说明，我也是学习js的一个新手。以下纯属个人见解，仅供参考：dom中的节点，无需深究它是否是对象，你只需要知道对应的节点代表什么就行。文本节点就是元素标签的文字内容，属性节点就是元素标签的属性，元素节点就是元素标签。然后，知道了这些，你就应该想得到，标签，是有属性，有内容的。也就是说你可以通过dom创建元素标签，属性，文字内容，然后向你创建的元素标签添加属性和文字内容，个人觉得dom的作用就是如此。

可以根据条件判断是否显示控制

gojs是一款基于canvas的图形库，是由Northwoods公司开发的商用javascript插件，可以基于项目的不同需求实现具有交互性的各类图表，比如流程图，树图，关系图，力导图等等。gojs采用面向对象思想，以图形对象表示绘图单元，JSON对象作为数据模型，图形对象通过属性绑定的方式从数据模型获取相关的属性值。gojs数据模型

gojs的数据模型以是否为树图分为GraphLinksModel和TreeModel两种JSON对象，GraphLinksModel包含nodeDataArray和linkDataArray属性，而TreeModel只包含nodeDataArray属性。gojs绘图单元

gojs的绘图单元很好理解，比如图中一个节点，一条线都可以理解成一个绘图单元，gojs通过不同的绘图模板实现不同的绘图单元，比如node,group,line…另外，gojs通过模板地图的方式管理不同样式的相同类型的绘图单元。gojs图表实践

gojs绘图流程包括创建图形对象，构建数据模型，设置图形对象属性，绑定数据模型，添加交互行为。

gojs创建流程图1、创建图形对象可以把$理解成一个画笔，而myDiagram理解成画布画图时，通过$调用gojs自身的属性和方法 ， 完成节点和连线的绘制，attrs为图形对象属性2、构建数据模型

数据模型分为2种，下面以图形连线模型为例，它包括nodeDataArray和linkDataArray3、图形对象属性绑定

举例说明，比如将图形对象的边框宽度strokeWidth和数据模型的宽度Width进行绑定4、添加交互行为

举例说明，比如为node添加鼠标事件，通过给其属性添加相应方法进行事件绑定gojs学习与思考元数据地图实践

gojs不足之处在于对于css动画支持不够，商用版权导致开发成本增加。优势在于canvas库封装较好，提供丰富的交互事件，能够满足实际项目的个性化需求。在项目使用中，对于常见图表，项目实际使用echartjs作为替代选择，对于定制化需求则采用gojs实现。

---