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. 创建一个图
- 引入gojs
- import * as go from "gojs"
- 准备一个div节点设置id
- 准备数据如下:
Var Diagram = new go.Diagram(“刚刚设置的id”)
Diagram.model = new go.GraphLinkModel(
[{key: “Hello”}, {key: “World!”}], // 定义两个节点
[{from: “Hello”, to: “World!”}] // 定义一条连线
);
效果:
原文地址:GoJS 图形组件简介 | GoJS