GoJ是一款js图形插件，可以实现web浏览器和平台的自定义交互图和可视化功能，包括就地文本编辑、复制粘贴、自动布局、数据绑定和模型、调色板和概述等功能，帮助用户轻松构建复杂的链接、节点和组的JavaScript图。

软件特色

1、GoJS是一个特性丰富的JavaScript库，用于在现代web浏览器和平台上实现自定义交互图和复杂的可视化。GoJS通过可定制的模板和布局轻松构建复杂节点、链接和组的JavaScript图。

2、GoJS为用户交互提供了许多高级特性，如拖放、复制粘贴、就地文本编辑、工具提示、上下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤消管理、调色板、概述、事件处理程序、命令和定制操作的可扩展工具系统。

3、GoJS是纯JavaScript，因此用户无需往返服务器，也无需插件。GoJS通常完全在浏览器中运行，呈现为HTML5 Canvas元素或SVG，不需要任何服务器端需求。GoJS不依赖于任何JavaScript库或框架，因此应该使用任何HTML或JavaScript框架，或者根本不使用框架。

4、使用GoJS的强大特性构建自定义建模环境和特定于领域的可视化语言。使用共享代码和模板提供系统编辑器和只读状态监视器。同时在不同的图中显示相同数据的可选可视化。使用子树和子图的展开或另一个图中的详细视图实现钻取。

5、然而，对于这样一个强大而灵活的系统来说，GoJS非常简单。我们的详细文档介绍了基本概念，并展示了大多数应用程序想要提供的典型特征。节点和链接可以根据应用程序的需要任意细化。API仅由几十个重要的类组成，这些类封装了许多相互交互的有用特性。有许多属性允许简单的定制;对于更复杂的定制，可以重写一些方法。

使用教程

准备图表数据

1、节点数据：

let nodeDataArray = [

{key: "iscroll容器-1", name: "iscroll容器-1", compId: "111", color: "pink", cursor: "grab",loc: "0 0"},

{key: "iscroll容器-2", name: "iscroll容器-1", compId: "222", color: "pink", cursor: "grab",loc: "0 -100"},

...

];

2、关系数据：

let relation = [

{from: "111", fromNodeType: "component", to: "222", toNodeType: "event"},

...

];

三、开始画图

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

1、创建图表

//'go-graph-diagram'： dom节点id

Let diagram = new go.Diagram('go-graph-diagram');

2、新建节点

let $ = go.GraphObject.make;

diagram.nodeTemplate = $(go.Node, 'Auto', //'Auto'：与css设置width:auto同样效果

{

// 添加点击事件

click: function(e, obj) {}

},

// 将节点数据nodeDataArray .loc与图表位置建立联系

new go.Binding('position', 'loc', go.Point.parse),

//设置节点形状：带圆角的长方形

$(go.Shape, 'RoundedRectangle',

// 设置大小，边框大小、颜色，背景色，鼠标手势

{desiredSize: new go.Size(160, NaN), strokeWidth: 0, fill: 'white', cursor: 'grab'},

//将节点数据nodeDataArray .color与节点背景色建立联系

new go.Binding('fill', 'color'),

//将节点数据nodeDataArray .cursor与节点鼠标手势建立联系

new go.Binding('cursor', 'cursor')

),

// 设置文本节点

$(go.TextBlock,

// 设置文本样式：大小，是否换行，margin

{

desiredSize: new go.Size(100, NaN),

wrap: go.TextBlock.WrapFit,

margin: 8

},

// bind TextBlock.text to Node.data.name

new go.Binding('text', 'name'),

new go.Binding('cursor', 'cursor')

)

);

3、设置线条和箭头

this.diagram.linkTemplate = $(go.Link,

$(go.Shape, // the link shape

{strokeWidth: 2, stroke: 'white'}),

$(go.Shape, // the arrowhead

{toArrow: 'OpenTriangle',

fill: null, stroke: 'white'})

);

4、其他设置

// 将图表在画布中居中显示

this.diagram.initialContentAlignment = go.Spot.Center;

// 操作支持ctrl+z、ctrl+Y 实现undo和redo

this.diagram.undoManager.isEnabled = true;

5、新建关系图

// 通过节点数据和关系数组完成关系图。

this.diagram.model = new go.GraphLinksModel(nodeDataArray, relation); //nodeDataArray:graph, linkDataArray: relation

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