Gojs_简单使用

简单使用

所有内容都是基于参考内容：官方文档 , 掘金-gojs基础绘图，vue+gojs 绘制鱼骨图

在 jsrun 放了简单案例，边看边尝试加深理解 –> 案例实践

go 是 GoJs 保留的 namespace ，Gojs类使用都会以此作为前缀开头

0. 直接引用在线库，进行学习使用<script src="https://unpkg.com/gojs/release/go-debug.js"></script>

1. 类似于canvas的使用，需要指定一个html div 作为画布（需明确显示区域大小）

   <div id="myDiagramDiv" style="width:400px; height:150px; background-color: #DAE4E4;"></div>

2. 通过 id 指定对应画布，创建空图表.

   // 创建可以通过`go`对象，或者通过构造器创建，即使用 `go.GraphObject.make` 创建并赋值
   var $ = go.GraphObject.make;
   // $(go.Diagram, 容器id, {配置项})
   var myDiagram = $(go.Diagram, "myDiagramDiv");
   复制代码

   gojs是 model-view 结构，视图是 madel 数据的可视化展现，使用只需关注数据对象的设定，例如：

   var $ = go.GraphObject.make;
   var myDiagram =
     $(go.Diagram, "myDiagramDiv",
       { // 启用撤销管理器，Ctrl-Z 和 Ctrl-Y 将撤销
         "undoManager.isEnabled": true
       });
   ​
   myDiagram.model = new go.Model(
     [ // 数组中的每个对象, 视图都会创建一个节点表示
       { key: "Alpha" },
       { key: "Beta" },
       { key: "Gamma" }
     ]);
   ​
   // 默认的节点模版，通过modle的key属性绑定TextBlock的text; 不设置默认先找text值，再找key值。
   myDiagram.nodeTemplate =
     $(go.Node,
       $(go.TextBlock,
         new go.Binding("text", "key"))
     );
   复制代码

3. 设置Node节点样式 扩展

   通过 nodeTemplate 或者 nodeTemplateMap 设置。

   • Diagram对象.nodeTemplate = $(go.Node, ...)
   • Diagram对象.nodeTemplateMap.add(模版名称,$(go.Node,...)) 适用于不同节点要设置不同样式

   // 重复部分不再赘述，将如下部分替换上案例的nodeTemplate部分
   myDiagram.nodeTemplate = $(
       go.Node,
       // 对齐方式，作用于作用区域内元素，可以注释后感受一下，下面一个一样。
       "Horizontal",
       $(go.Panel,
         "Horizontal",
         { background: 'gray', margin: 10, width: 50, height: 50 },
         $(go.TextBlock, { stroke: '#fff' }, new go.Binding("text", "key"))
        ),
       $(go.TextBlock, { stroke: 'blue' }, new go.Binding("text", "key"))
   );
   复制代码

   ---

   为了减少说明位置的书写， 内容｜ 代表对应内容为非填项目。后续会经常用到 $(...) 写法，写法通常 $(go.对象, 方式或类型｜, {配置项}｜,绑定数据|,$(...)) 。

   $ 为 go.GraphObject.make ，是自定义的短变量，也可定义为其他，这里为了通用，后续都用$表示。

   绑定数据，通过new go.Binding(外层go.对象上的属性,数据中对应的字段名｜,Func数据转换方法|) ，属性和字段名一致的情况下，可以不写

   Func对应写法， (value)=>{} value为数据中字段名对应的值。

   $(go.TextBlock,默认值|,...) 在没有绑定数据的情况下或者绑定的对应键不存在（key是不一样的，即使不设置也会有值）的情况下，会显示默认值。

   Node下支持 Shape 图形，TextBlock 文字模块，Picture 图片，Panel 容器。

4. 链接节点

   很多情况下，我们都是要通过链接节点展示对应节点结构关系，这个时候我们就可以选择 GraphLinksModel 或 TreeModel 。

   • Diagram对象.model = new go.GraphLinksModel([节点数组],[链接关系数组]);
   • Diagram对象.model = new go.TreeModel([有parent指定的节点数组]);

   // 链接关系对象通过to和from来描述链接之间的关系，可以在节点间任意建立多个链接关系
   myDiagram.model = new go.GraphLinksModel(
     [
       { key: "A" },
       { key: "B" },
       { key: "C" },
       { key: "D" }
     ],
     [
       { from: "A", to: "B" },
       { from: "B", to: "C" },
       { from: "B", to: "D" }
     ]);
   // TreeModel 是通过指定parent来维护链接关系的，不能建立任意链接关系，父节点有唯一性。
   myDiagram.model = new go.TreeModel(
     [
       { key: "A" },
       { key: "B", parent: "A" },
       { key: "C", parent: "B" },
       { key: "D", parent: "B" }
     ]);
   复制代码

   通过上面的例子，成功链接节点后，会发现 TreeModel 创建的结构关系，并不清晰，这个时候就要通过图表布局来解决这个问题。

5. 图表布局

   可以通过给每个节点设置位置，去控制展示，但是这样比较麻烦，官方提供了直接通过设置布局方式控制，更多布局相关参考 Diagram Layouts ，TreeLayout更多的可能参考TreeLayout Demo。

   // TreeLayout 默认为从左到右,将angle设置为90度实现从上往下
   myDiagram.layout =
     $(go.TreeLayout,
       { angle: 90, layerSpacing: 35 });
   复制代码

6. 控制链接样式 Link Templates

   通过设置 linkTemplate 控制链接样式，链接不同于节点，link 主要由Shape构成 。

   // 定义一个没有箭头的圆角链接
   // 将routing属性设置为直角，然后通过设置corner值，使得直角转弯为圆形
   myDiagram.linkTemplate =
     $(go.Link,
       // 默认 routing 为 go.Link.Normal
       // 默认角度为0
       { routing: go.Link.Orthogonal, corner: 5 },
       // 路径形状
       $(go.Shape, { strokeWidth: 3, stroke: "#555" })
       // 如果我们需要箭头，可以通过添加另一个定义了toArrow的图形:
       // $(go.Shape, { toArrow: "Standard", stroke: null })
     );
   复制代码