GoJS图表组件介绍

前端

本文是对GoJS官方文档Introduction to GoJS Diagramming Components一节的翻译。

GoJS图表组件介绍

GoJS是一个能让你轻易地在现在浏览器中创建可交互式图表的JavaScript库。GoJS支持图表模板和绑定模型数据到图表对象属性。无论你的app需要什么样的属性，你只需要保存和恢复模型（由JavaScript简单对象组成）即可。许多预定义的工具和命令实现了大部分图表需要的标准行为。定制外观和行为通常主要是设置属性而已。

一个简单的GoJS图表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 更多相关概念 参考 "Building Parts" 介绍页
var $ = go.GraphObject.make;

// 节点模板描述每个节点应该如何构造
diagram.nodeTemplate =
  $(go.Node, "Auto",  // 形状自适应文本块
    $(go.Shape, "RoundedRectangle",  // 形状类别
      // 绑定 Shape.fill 到 Node.data.color
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 3 },  // 围绕文本的空间
      // 绑定 TextBlock.text 到 Node.data.key
      new go.Binding("text", "key"))
  );

// 模型仅保持图表需要的必要的信息
diagram.model = new go.GraphLinksModel(
[ // JS对象数组, 一项一个节点;
  // the "color" property is added specifically for this app
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[ // JS对象数组, 一项一个连线
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

// 启动 Ctrl-Z 撤消 和 Ctrl-Y 重做
diagram.undoManager.isEnabled = true;

GoJS概念

图表(Diagram)由部件(Part)组成：可以由连线(Link)连接的节点(Node)和能将连线和节点分组的组(Group)，所有这个部件集中在层(Layer)上，并由布局(Layout)来组织排列。

每一个图表有一个模型，用来保存和解释应用的数据（节点到节点的连接关系，组-成员的关系）。许多部件是数据绑定到你的应用数据。图表自动为模型的Model.nodeDataArray的每一个数据项创建节点和组，为模型的GraphLinksModel.linkDataArray的每一个数据项创建连线。你可以添加任何你需要的属性到每一个数据项对象上，仅有少量属性是每类模型要求的。

每个节点和连线通常是由模板来定义，这个模板定义了节点和连线的外观和行为。每个模板由GraphObject对象的面板(Panel)组成，例如：文本块(TextBlock)和形状(Shape)。所有部件都有默认的模板，但几乎所有的应用都需要自定义模板来达到期望的外观和行为。GraphObject属性到数据模型属性的数据绑定使节点和连线针对数据惟一。

节点可以被手动放置（交互方式或编程方式），或者由Diagram.layout和每个Group.layout自动排列。节点即会由他们的左上角的点(GraphObject.position)也会由程序员给节点定义的Spot(Part.location和Part.locationSpot)定位。

工具处理鼠标和键盘事件。每个图表有许多工具执行交互任务，例如：选择、拖动、在两个节点间连线。ToolManager决定哪一个工具应该运行，取决于鼠标事件和当前情形。

每个图表有一个CommandHandler实现了各种命令，如：删除、拷贝。当ToolManager运行时，CommandHanlder处理键盘事件，如：ctrl + z。

图表提供了滚动和缩放图表部件的能力。图表包含所有的层，而层依次包含所有的部件(Node和Link)。部件依次由文本、形状、图片面板嵌套组成。内存中的JavaScript对象结构表现为虚拟树的形式，并由图表对象进行绘制。

Overview类允许用户查看整个模型，并操纵图表的显示部分。Palette类保存了允许用户拖放到图表中的部件。

你可以选择图表中的一个或多个部件。当节点或连线选中时，默认的模板实现会改变其外观。图表也可以添加装饰用于来指示选中状态或支持缩放节点或重连连线的工具。装饰也是工具提示和上下文菜单实现的方式。

所有以编程方式对Diagram、GraphObject、Model和模型数据状态作的更改，都应该按每个用户动作放到一个单独的事务里执行，这样才能确保更新正确地发生并支持撤消和重做。所有预定义的工具和命令都是执行事务，因此如果启用了撤消和重做功能（UndoManager设为true），则每个用户动作都是可撤消和重做的。图表上的图表事件（DiagramEvent）以及图表和图表对象上的事件处理程序，都被记录在一个事务中，未完待续……