GoJS学习笔记

目录

• 基础概念
• 开始绘制图形
  • [1. 通过代码构建图形](#1. 通过代码构建图形)
  • [2. 通过 GraphObject.make 构建图形](#2. 通过 GraphObject.make 构建图形)
  • [3. 使用 Model 和 Templates 创建图形](#3. 使用 Model 和 Templates 创建图形)
• 获取图形数据
  • [获取所有 Node、Link](#获取所有 Node、Link)
  • diagram.model.toJSON()
  • [获取指定的 Node，Link](#获取指定的 Node，Link)
  • 获取选择元素信息
• 修改图形
  • 修改节点属性
  • 选中元素
  • 删除、添加节点和边
• 事件
• Transactions
• [Template Maps](#Template Maps)
• [Palette Diagrams](#Palette Diagrams)
• 在Vue中使用GOJS

GoJS 和 GO 语言没有关系，它是一个用来创建交互式图表的 JavaScript 库。
GraphObject.make，可以用来创建各种 GraphObject 元素，同时定义元素的属性。可以嵌套定义多个元素。

上面代码也可以写为下面的方式（因为 go.GraphObject.make 使用较多，所以官网建议命名为 $ 方便使用，你当然也可以起其他的名字）

var diagram = new go.Diagram("myDiagramDiv");
var $ = go.GraphObject.make;
diagram.add(
    $(go.Node, go.Panel.Auto,
        $(go.Shape,
            { figure: "RoundedRectangle", fill: "lightblue" }),
        $(go.TextBlock,
            { text: "Hello!", margin: 5 })
    ));

好处一方面是代码量减少了，另一方面如果给元素赋值了错误的属性，make 函数会报出错误。

例如，如果 text 写错为 test，会在控制台看到报错：

Uncaught Error: Trying to set undefined property "test" on object: TextBlock("")

https://gojs.net/latest/samples/vue.html