GoJS入门教程：从零开始学习交互式图表开发

什么是GoJS？

GoJS是一个功能强大的JavaScript库，专门用于创建各种交互式图表，包括但不限于组织结构图、流程图、网络图、思维导图等。它采用模型-视图架构设计，使开发者能够轻松构建复杂的可视化应用。

环境准备

引入GoJS库

在HTML文件中引入GoJS库有两种主要方式：

1. 本地引入（推荐开发时使用调试版本）：

<script src="go-debug.js"></script>

2. 通过CDN引入：

<script src="https://cdn.jsdelivr.net/npm/gojs/release/go-debug.js"></script>

创建图表容器

每个GoJS图表都需要一个具有明确尺寸的HTML div元素作为容器：

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

创建基础图表

初始化图表

在JavaScript中，通过简单的代码即可创建一个空图表：

const myDiagram = new go.Diagram("myDiagramDiv");

这里需要注意：

• go是GoJS的命名空间
• 所有GoJS类如Diagram、Node、Panel等都需要使用go.前缀

模型与视图架构

GoJS采用模型-视图架构：

• Model：管理数据（JavaScript对象数组）
• Diagram：作为视图，可视化这些数据

const myDiagram = new go.Diagram("myDiagramDiv", {
  "undoManager.isEnabled": true  // 启用撤销/重做功能
});

myDiagram.model = new go.Model([
  { text: "Alpha" },
  { text: "Beta" },
  { text: "Gamma" }
]);

节点模板设计

基本构建块

GoJS提供了多种构建块来设计节点：

• Shape：显示预定义或自定义几何图形
• TextBlock：显示可编辑文本
• Picture：显示图像（包括SVG）
• Panel：容器，用于组织其他对象

数据绑定

通过数据绑定，可以将模型数据属性与图形对象属性关联：

myDiagram.nodeTemplate =
  new go.Node("Vertical", { locationSpot: go.Spot.Center })
    .bind("location", "loc", go.Point.parse)
    .add(
      new go.Shape("RoundedRectangle")
        .bind("figure", "fig"),
      new go.TextBlock("default text")
        .bind("text")
    );

实用节点模板示例

创建一个常见的组织图节点模板（头像+姓名）：

myDiagram.nodeTemplate =
  new go.Node("Horizontal", { background: "#44CCFF" })
    .add(
      new go.Picture({
        margin: 10, 
        width: 50, 
        height: 50, 
        background: "red"
      }).bind("source"),
      new go.TextBlock("Default Text", {
        margin: 12, 
        stroke: "white", 
        font: "bold 16px sans-serif"
      }).bind("text")
    );

交互功能

GoJS默认提供丰富的交互功能：

• 点击拖动背景平移视图
• 点击选择节点或拖动移动节点
• Ctrl+C/Ctrl+V复制粘贴（Mac使用Command键）
• Delete键删除选中节点
• 触摸设备长按显示上下文菜单
• 启用撤销管理器后支持Ctrl-Z/Ctrl-Y撤销重做

最佳实践建议

1. 开发阶段使用go-debug.js，生产环境使用go.js
2. 始终为图表容器指定明确尺寸
3. 充分利用数据绑定机制，避免直接操作DOM
4. 复杂节点使用Panel进行层次化组织
5. 合理使用撤销管理器提升用户体验

通过本教程，您已经掌握了GoJS的基础知识。接下来可以探索更高级的主题如自定义链接、布局算法、事件处理等，以构建更复杂的图表应用。