GoJS起步

1. 基础示例

// 给make这个主要函数起别名，方便使用

var $ = go.GraphObject.make;

// nodeTemplate定义一个节点模版，节点按照此模版生成

diagram.nodeTemplate =

  $(go.Node, "Auto",  // Auto代表节点形状自适应文本内容

    $(go.Shape, "RoundedRectangle",  // RoundedRectangle代表节点形状是圆角矩形

      // 将Shape.fill 与 Node.data.color属性绑定

      new go.Binding("fill", "color")),

    $(go.TextBlock,

      { margin: 3 },  // 设置文本块的样式，外边距为3

      // 绑定TextBlock.text 与 Node.data.key属性

      new go.Binding("text", "key"))

  );

// 图中要展示的数据，将其赋给diagram.model

diagram.model = new go.GraphLinksModel(

[ // 一个由对象组成的数组，每个对象代表一个节点

  // 注意color属性适合图中什么绑定的

  { key: "Alpha", color: "lightblue" },

  { key: "Beta", color: "orange" },

  { key: "Gamma", color: "lightgreen" },

  { key: "Delta", color: "pink" }

],

[ // 一个对象代表一个连线

  { from: "Alpha", to: "Beta" },

  { from: "Alpha", to: "Gamma" },

  { from: "Beta", to: "Beta" },

  { from: "Gamma", to: "Delta" },

  { from: "Delta", to: "Alpha" }

]);

// 允许使用撤销和撤销重做功能

diagram.undoManager.isEnabled = true;

2. GoJS主要组成类

“图”是Diagram对象，由“部分”（Part对象）组成。Part对象可以包括节点（Node对象）、连接线（Link对象）和分组（Group对象），所有这些部分都聚集在“图层”（Layer对象）中，并按照“布局”（Layout对象）排列。

每个Diagram都有Model属性，Model属性保存图中节点和连线、组的数据。GoJS会按照Model.nodeDataArray属性创建节点数组，按照GraphLinksModel.linkDataArray属性创建连线。（GraphLinksModel是Model的子类）。

Tools类处理鼠标、键盘事件，ToolManager决定哪个tool运行，CommandHandler类实现各种命令如删除、复制、撤销等。Overview类提供全局概览，Palette类控制一个部分，在这个部分中可以定义一些图形，用户可以拖入图中。Adornment类控制一些效果，比如选中效果。

3. 创建一个图

1. 引入gojs
2. import * as go from "gojs"
3. 准备一个div节点设置id
4. 准备数据如下：

Var Diagram = new go.Diagram(“刚刚设置的id”)

Diagram.model = new go.GraphLinkModel(

[{key: “Hello”}, {key: “World!”}], // 定义两个节点

[{from: “Hello”, to: “World!”}] // 定义一条连线

);

效果：

原文地址：GoJS 图形组件简介 | GoJS