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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/hdp134793/article/details/100579854
学习gojs笔记3

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

直接开撸开效果讲解可能你们会更好理解。
在这里插入图片描述
在这里插入图片描述
如上所示的效果A-B-C这种指向图的代码如下所示(两个核心点已标记):

在这里插入图片描述
在上面的代码中我们应用的是GraphLinksModel 这个属性设置的模型,其设置的各个节点的连线相对来说比较简洁,从哪到哪很直观反应,也不存在什么层级结构,那么待会就给大家介绍一个比这个相对较好的TreeModel 模型类型的设置实例,主要是通过一个父子结构来确定线条的走向。看下面的图形和对应的代码解析。
在这里插入图片描述
在这里插入图片描述
不难发现其效果一样,只是代码结构发生改变,隐藏的还有一个页面树结构。但是后面的这个TreeModel是不能随意链接的,两个节点之间不能有多条连线。记住这个是由父指向子的。
来个相对复杂一些的例子吧,如下所示:
在这里插入图片描述
其中代码模块如下你不难发现各个节点之间的关系。
在这里插入图片描述

2、从上面看,虽然我嘴上说看出父子节点的关系,但是我们还是发现页面上呈现出来的还是贼混乱,强迫症看的难受,所以这里专门为强迫症孩纸们进行了一个调整。
如何实现图表布局
如果大家想看到使用TreeModel实现的层级关系,那么我们先用最自然的布局就是TreeLayout。TreeLayout默认是从左向右排列,所以我们需要把设置为从上到下的形式(常见关系图布局形式), 我们将角度值设置为90,也就是改成垂直结构。如下所示:
在这里插入图片描述
这么简单清晰的结构我们的代码又是什么样子的呢?看改进版本1代码:
在这里插入图片描述
那么这个看起来还是有点棱角,硌的难受,那么我们就将这个拐点的地方做个优化吧,在原来的代码上增加这段,也就是去除箭头,线转弯的地方更圆滑垂直。
在这里插入图片描述
在这里插入图片描述
那么这章节主要介绍这些走线,希望您能学到一些东西。需要demo的可留言

猜你喜欢

转载自blog.csdn.net/hdp134793/article/details/100579854
今日推荐