FAQs

GoJS由部分组成：节点可以由链接连接，并且可以被分组到组中。 所有这些部分都聚集在层中，并由布局和路由器进行排列。

每个GoJS都有一个模型，它 holding 并解释你的应用数据，以确定节点间的链接关系和组成员关系。 大部分部分是与你的应用数据数据绑定的。 GoJS会自动为模型的Model.nodeDataArray中的每个数据项创建一个Node，为模型的 GraphLinksModel.linkDataArray中的每个数据项创建一个Link。 你可以为每个数据对象添加你需要的任何属性，但每种模型期望的属性只有少数几个。 它们在灰色的数据对象中以加粗形式显示。

每个节点或链接通常由一个模板定义，该模板声明其外观和行为。 每个模板由面板的图形对象如文本块或形状组成。 所有部分都有默认模板，但几乎所有的应用程序都会指定自定义模板 以实现所需的外观和行为。 图形对象属性的数据绑定到模型数据属性，使每个节点或链接对数据来说都是唯一的。

节点可以手动（交互地或通过程序）定位，或者 可以由 Diagram.layout和每个 Group.layout自动排列。 节点的位置可以通过其左上角点（ GraphObject.position）或者 通过程序员定义的节点位置（ Part.location和 Part.locationSpot）来确定。

工具处理鼠标和键盘以及触摸或笔输入事件。 每个GoJS都有多个工具执行交互任务，例如选择部分、拖动它们或在两个节点之间绘制新链接。 工具管理器根据鼠标事件和当前情况决定应运行哪个工具。

每个图表还有一个CommandHandler，它实现了各种命令，例如删除或复制。 CommandHandler在ToolManager运行时解释键盘事件，例如Ctrl-Z。

该图表提供了滚动图表各部分以及放大或缩小的功能。 图表还包含所有图层，这些图层又包含所有部分（节点和链接）。 这些部分进一步由可能嵌套的文本、形状和图像面板组成。 这些JavaScript对象在内存中的层次结构形成了GoJS可能绘制的所有内容的“视觉树”。

动画由AnimationManager实现和控制。 自动动画在自动布局和执行各种命令后自动发生。 您可以定义自己的自定义动画。

概述 类允许用户查看整个模型，并控制图表显示的模型的哪一部分。 调色板 类包含用户可以拖放到图表中的部件。

您可以选择GoJS中的一个或多个部分。模板实现可能会更改所选节点或链接的外观。图表还可能添加装饰来表示选择，并支持诸如调整节点大小或重新连接链接之类的工具。装饰也是实现工具提示和上下文菜单的方式。

对 Diagram、 GraphObject、 Model 或模型数据状态的所有程序化更改应在一个用户操作的事务中进行，以确保更新正确并支持撤销/重做。 所有预定义的工具和命令都会执行事务，因此如果启用了 UndoManager，每个用户操作都可以自动撤销。 DiagramEvent 在 Diagrams 上，以及在 Diagrams 和 GraphObjects 上的事件处理程序， 即使它们是在事务内引发的，或者你需要进行事务以更改模型或GoJS，都已文档化。

GoJS 不依赖任何 JavaScript 库或框架，因此您应该能够在任何环境中使用它。 但是，它确实要求环境支持现代 HTML 和 JavaScript。

正在加载 GoJS

在执行任何用于构建图表的JavaScript代码之前，您需要加载GoJS库。 当您包含库时，”go“JavaScript对象将包含所有的GoJS类型。 在开发过程中，我们建议您加载”go-debug.js”而不是”go.js”，以进行额外的运行时错误检查和调试能力。

我们建议您声明您的网页支持现代HTML：

  

  
  . . .
  
  

如果依赖于你的npm环境：

import * as go from "gojs";

如果您想使用 ECMAScript 模块，请在 go-module.js 中使用 release/ 目录。 然而，您的构建环境可能会自动为您做出这个选择。

扩展类在 TypeScript 中实现，并编译为 extensionsJSM/ 目录中的 ECMAScript 模块。 该目录存在于从我们 网站 或 GitHub 下载的工具包中， 或者在您可以通过 安装的 create-gojs-kit npm 包中。 扩展类编译成可以在 目录中的常规脚本加载的 JavaScript。 npm create gojs-kit@latestextensions/

import { DoubleTreeLayout } from "./path/to/gojs-kit/dist/extensionsJSM/DoubleTreeLayout.js";

如果您使用 RequireJS, GoJS 库支持 UMD 模块定义。 将每个扩展文件复制到您的项目中，并更新其 require 语句 以便您的所有代码加载相同的 GoJS 库，并且只加载一次。

在 Div 元素中托管 GoJS

每个图表必须由一个HTML Div元素托管。 GoJS将管理那个Div元素的内容，但您可以像处理任何HTML元素一样来定位、调整大小和样式化Div元素。 图表将在那个Div元素中添加一个Canvas元素，图表将在其中绘制——这就是用户实际看到的内容。 Canvas元素会自动调整大小，使其与Div元素具有相同的大小。

  . . .
  
  

然后，您可以使用引用该 Div 元素的 JavaScript 代码创建 图表。 通过构建简单的 JavaScript 对象并将它们添加到图表的模型中来构建图表。 请注意，JavaScript 代码中对 GoJS 类型（如 Diagram）的所有引用都以 “go.” 为前缀。

  const diagram = new go.Diagram("myDiagramDiv");
  diagram.model = new go.GraphLinksModel(
    [{ key: 1, text: "Hello" },   // two node data, in an Array
     { key: 2, text: "World!" }],
    [{ from: 1, to: 2 }]  // one link data, in an Array
  );

上面您所看到的“Hello World!”实时示例的全部实现仅需一个HTML DIV元素和一点JavaScript代码。

开发你的图表

GoJS 当发生错误时，会输出错误或警告信息。 在使用 GoJS 开发时，请确保检查浏览器的开发者控制台以获取信息。 库的 “go-debug.js” 版本包含额外的类型检查和错误检查代码，应在开发期间使用。 “go.js” 版本的错误检查较少，但因此更快，应在生产中使用。

您的JavaScript代码应仅使用文档中描述的 API 的属性和方法。 GoJS 库是“最小化”的，因此如果您在调试器中查看 GoJS 类的一个实例， 您会看到许多一两个字母的属性名。所有这些都是您不应使用的内部名称。 目前， Point、Rect、Spot 和 LayoutVertex 上的唯一一字母属性名是“x”和“y”。 唯一的两字母属性名是 InputEvent.up。 否则，您不应尝试在任何 GoJS 定义的对象上使用任何一两个字母的属性名。

不要修改 GoJS 类的原型。
只能使用 API 文档中记录的属性和方法。

你也可以使用TypeScript，以获得更好的“编辑时”和“编译时”类型检查以及“编辑时”文档。 GoJS的TypeScript定义文件名为“go.d.ts”和“go-module.d.ts”，位于与库相同的目录中。 扩展类在TypeScript中实现，可在../extensionsJSM/ 找到，并在../extensionsJSM/和../extensions/编译成JavaScript。 将扩展定义复制到你的项目中，并确保它们导入与所有代码相同的GoJS库。

以下代码定义了一个节点模板和模型数据，生成一个包含少量节点和链接的小图。

// the node template describes how each Node should be constructed
diagram.nodeTemplate =
  new go.Node("Auto")
    .add(  // the Shape will be sized to go around the TextBlock
      new go.Shape("RoundedRectangle")
        // Shape.fill is bound to Node.data.color
        .bind("fill", "color"),
      new go.TextBlock({ margin: 8}) // Specify a margin to add some room around the text
        // TextBlock.text is bound to Node.data.text
        .bind("text")
    );

// the Model holds only the essential information describing the diagram
diagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node;
  // the "color" property is added specifically for this app
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);

// enable Ctrl-Z to undo and Ctrl-Y to redo
diagram.undoManager.isEnabled = true;

您可以以多种方式与该图表进行互动：

• 你可以通过点击来选择一个部分（一个节点或一个连接）。 选定的节点会用一个装饰突出显示，该装饰是一个围绕节点的蓝色矩形。 选定的连接会用一条沿着连接路径的蓝色线条来突出显示。
• 可以同时选择多个部分。 点击时按住Shift键以添加到选择中。 点击时按住Control键以切换该部分是否被选中。
• 另一种多选方式是在背景上点击并按住鼠标（不在零件上），等待片刻，然后拖动一个框。 当松开鼠标时，框内完全包含的零件将被选中。 Shift 和 Control 修改键在该操作中也可以使用。
• Ctrl-A 选择图表中的所有部分。
• 通过选择并拖动一个或多个节点来移动它们。
• 复制选定部分可以使用复制/粘贴（Ctrl-C/Ctrl-V）或Ctrl-鼠标拖动。
• 使用删除键删除选定部分。
• 按Ctrl-Z撤销上一次修改，按Ctrl-Y恢复上一次修改。
• 如果滚动条可见，或者整个零件集合小于图表的可见区域（“视口”），在背景上按住鼠标不放（不在零件上），可以平移图表。
• 使用鼠标滚轮上下滚动，使用Shift + 鼠标滚轮左右滚动。 Ctrl + 鼠标滚轮用于放大和缩小。

您还可以在触摸设备上用手指进行平移、捏放缩放、选择、复制、移动、删除、撤销和重做。 大多数可以从键盘调用的命令，您可以通过按住手指静止片刻来调用默认的上下文菜单进行调用。

文档中所有示例的唯一特点是它们都是“动态”的——没有截图！ 它们是由源代码实现的真正的图表。 您可以与它们互动——有些甚至显示动画。

为了更容易地搜索 JavaScript 代码和文档，或者通过修改示例进行实验， 您可以通过各种方式安装 GoJS 套件：

• 从我们的下载页面下载一个ZIP文件。
• 克隆或下载自 GoJS 在 GitHub 上.
• 使用 npm install gojs 和 npm create gojs-kit@latest 安装 GoJS。