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

学习gojs笔记3

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

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

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

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

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

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

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

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

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

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

GOJS入门三-如何设置节点间的连线相关推荐

《程序员代码面试指南》第三章二叉树问题二叉树节点间的最大距离问题
题目二叉树节点间的最大距离问题 java代码 package com.lizhouwei.chapter3;/*** @Description:二叉树节点间的最大距离问题* @Author: liz ...
传智播客 React 入门三天课程
传智播客 React 入门三天课程第一天理论和配置虚拟DOM和DIFF算法 React 的核心是虚拟DOM和DIFF算法.DIFF 算法确保虚拟DOM高效运行(从上到下分别是 tree-dif ...
集群节点间的延迟问题
集群节点间的延迟问题 mongoDB 一个弱点,就是最终一致性,这也是所有NoSQL 的一个问题. 在CAP 理论中,数据库在 (C)onsistency.(A)vailability和(P)arti ...
ZooKeeper实战（一）：ZooKeeper原理，详细安装步骤，基本命令，节点间通信原理
回顾Redis 用redis实现分布式锁比较复杂,使用zookeeper会比较简单. 一.ZooKeeper介绍官网 https://zookeeper.apache.org/ 概览文档 https ...
Elasticsearch6.8开发指南-第三章-设置Elasticsearch
Elasticsearch6.8开发指南-第三章-设置Elasticsearch 本章简介安装Elasticsearch 使用.zip或安装Elasticsearch.tar.gz 在Windows ...
redis入门(三)
文章目录 @[toc] redis入门(三) 目录前言事务原理 Lua脚本安装脚本命令 EVAL EVALSHA lua和redis互操作 SCRIPT EXISTS SCRIPT FLUS ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
P2P网络节点间如何互访——详解STUN方式NAT穿透
P2P网络节点间如何互访--详解STUN方式NAT穿透转载请注明出处:https://www.jzgwind.com/?p=973 by joey 一.背景 P2P网络的核心原理,是将分布在网络上 ...
[转载]Python爬虫入门三之Urllib库的基本使用
python爬虫系列教程http://cuiqingcai.com/1052.html 1.分分钟扒一个网页下来怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优 ...

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

GOJS入门三-如何设置节点间的连线相关推荐

最新文章

热门文章