GOJS入门三-如何设置节点间的连线

学习gojs笔记3

1、如何设置节点连线（Models的种类）
如何建立一个连线？你得记住这个知识点：from to这个语法的应用。
但是这个地方有个问题就是原先的model是根本满足不了这个需求的，所以我们就应该引入一个新的东西GraphLinksModel和TreeModel这两个模型。

直接开撸开效果讲解可能你们会更好理解。


如上所示的效果A-B-C这种指向图的代码如下所示（两个核心点已标记）：

在上面的代码中我们应用的是GraphLinksModel 这个属性设置的模型，其设置的各个节点的连线相对来说比较简洁，从哪到哪很直观反应，也不存在什么层级结构，那么待会就给大家介绍一个比这个相对较好的TreeModel 模型类型的设置实例，主要是通过一个父子结构来确定线条的走向。看下面的图形和对应的代码解析。


不难发现其效果一样，只是代码结构发生改变，隐藏的还有一个页面树结构。但是后面的这个TreeModel是不能随意链接的，两个节点之间不能有多条连线。记住这个是由父指向子的。
来个相对复杂一些的例子吧，如下所示：

其中代码模块如下你不难发现各个节点之间的关系。

2、从上面看，虽然我嘴上说看出父子节点的关系，但是我们还是发现页面上呈现出来的还是贼混乱，强迫症看的难受，所以这里专门为强迫症孩纸们进行了一个调整。
如何实现图表布局
如果大家想看到使用TreeModel实现的层级关系，那么我们先用最自然的布局就是TreeLayout。TreeLayout默认是从左向右排列，所以我们需要把设置为从上到下的形式（常见关系图布局形式）， 我们将角度值设置为90，也就是改成垂直结构。如下所示：

这么简单清晰的结构我们的代码又是什么样子的呢？看改进版本1代码：

那么这个看起来还是有点棱角，硌的难受，那么我们就将这个拐点的地方做个优化吧，在原来的代码上增加这段，也就是去除箭头，线转弯的地方更圆滑垂直。


那么这章节主要介绍这些走线，希望您能学到一些东西。需要demo的可留言