GoJS绘图组件介绍

GoJS 是一个JavaScript库，可以让你很轻松的在现代web浏览器中创建交互式图表。 GoJS 支持图形模板和图形对象属性到模型数据的数据绑定。您只需要保存和恢复模型，它由简单的JavaScript对象组成，其中包含应用程序需要的任何属性。许多预定义的工具和命令实现了大多数图表需要的标准行为。外观和行为的定制主要是设置属性的问题。

一个简单的GoJS图

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

      // For conciseness. See the "Building Parts" intro page for more
      var $ = go.GraphObject.make;

      // the node template describes how each Node should be constructed
      diagram.nodeTemplate =
        $(go.Node, "Auto",  // the Shape automatically fits around the TextBlock
          $(go.Shape, "RoundedRectangle",  // use this kind of figure for the Shape
            // bind Shape.fill to Node.data.color
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            { margin: 3 },  // some room around the text
            // bind TextBlock.text to Node.data.key
            new go.Binding("text", "key"))
        );

      // 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: "Alpha", color: "lightblue" },
        { key: "Beta", color: "orange" },
        { key: "Gamma", color: "lightgreen" },
        { key: "Delta", color: "pink" }
      ],
      [ // a JavaScript Array of JavaScript objects, one per link
        { from: "Alpha", to: "Beta" },
        { from: "Alpha", to: "Gamma" },
        { from: "Beta", to: "Beta" },
        { from: "Gamma", to: "Delta" },
        { from: "Delta", to: "Alpha" }
      ]);

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

这将创建以下图：

您可以通过多种方式与此图表交互:

你可以通过点击选择一个部分。选中的节点用Adornment(装饰)突出显示，它是围绕该节点的蓝色矩形选中的链接用一条蓝色的线高亮显示，该线沿着链接的路径.
可同时选择多个部件。当点击添加到选择时按住Shift键。单击时按住Control键以切换该部分是否被选中。
另一种多选的方法是在背景的某一点(不是某一部分)上按下鼠标，稍等片刻，然后拖动一个方框。选中当鼠标向上移动时在方框中的部分。Shift和Control修饰符也可以工作。
Ctrl-A 选择图中的所有部分
通过选择并拖动来移动一个或多个节点
复制选定部分可以使用复制/粘贴(Ctrl-C/Ctrl-V)或ctrl -鼠标拖动
使用Delete键删除选定的部分
如果滚动条是可见的，或者如果整个部分的集合小于图表的可见区域（“视口”），则可以在没有拖动的情况下在背景中（而不是在零件上）用鼠标悬停来平移图表等候。
使用鼠标滚轮上下滚动，使用Shift-鼠标滚轮左右滚动。Ctrl-鼠标轮可放大和缩小。

您还可以用手指在触摸设备上平移，收缩缩放，选择，复制，移动，删除，撤消和重做。可以从键盘调用的大多数命令都可以从默认上下文菜单中调用，该默认上下文菜单是通过按住手指并保持一会儿不动来获得的。

文档中所有示例的独特之处在于它们都是“实时”的-没有截图！它们是由所示源代码实现的实际Diagram。您可以与他们互动-甚至可以显示动画。

如果您想查看有关GoJS 可以做什么的更多示例，请参见GoJS Samples directory. 为了更轻松地搜索JavaScript代码和文档或通过修改示例进行实验，您可以通过多种方式安装GoJS套件:

从Download下载一个ZIP文件。
从GoJS on GitHub下载
使用安装GoJS npm install gojs.

GoJS 概念

Diagram由 Part组成: Node可以通过 Link链接，也可以将它们组合成Group. 所有这些部分都聚集在Layers并由Layout排列 .

每个图都有一个Model用于保存和解释应用程序数据，以确定节点到节点的链接关系和组成员之间的关系大多数 parts(部分)都绑定到应用程序数据 diagram 自动为模型的Model.nodeDataArray中的每个数据项创建 Node 或者 Group 并为模型的GraphLinksModel.linkDataArray中的每个数据项创建一个Link。您可以将所需的任何属性添加到每个数据对象，但是每种模型都只需要一些属性。

每个Node 和 Link 通常由声明其外观和行为的模板定义每个模板由GraphObject的Panel组成，例如TextBlock或者Shape. 所有part都有默认的模板,但几乎所有的应用程序都会指定自定义模板以达到所需的外观和行为 GraphObject属性与模型数据属性的数据绑定使每个节点或链接对于数据而言都是唯一的。

节点可以手动定位（交互式或编程），也可以由Diagram.layout和每个Group.layout自动排列。节点由其左上角的点(GraphObject.position)定位，或由节点中的程序员定义的点(Part.location and Part.locationSpot)定位。

Tool处理鼠标和键盘事件.每个图表都有许多工具执行交互式任务，例如选择部分或者拖动它们或者在两个节点之间绘制新的链接 ToolManager 根据鼠标事件和当前情况确定应该运行哪个工具

每个图也有一个CommandHandler 实现各种命令, 如删除和复制当ToolManager运行时 CommandHandler 解释键盘事件例如 control-Z

diagram 提供了滚动图的各个部分并放大或缩小的功能 diagram 还包含所有的图层，这些图层又包含所有的部分(nodes and links). parts 依次由可能嵌套的text，shapes和images组成内存中的JavaScript对象层次结构形成了图表可以绘制的所有内容的“可视化树”。

Overview类允许用户查看整个模型并控制该图显示的部分 Palette类包含用户可以拖放到图表中的部分。

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

对于Diagram, GraphObject, Model 数据状态的所有编程更改都应在每个用户操作的单个事务中执行，以确保更新正确进行并支持撤消/重做. 所有预定义的工具和命令都执行事务因此，如果启用了UndoManager则每个用户操作可以自动撤消. Diagrams上的DiagramEvent以及Diagrams 和 GraphObjects上的事件处理程序都会记录它们是否在事务中引发，或者是否需要执行事务以更改模型或图表。

创建一个图

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

加载 GoJS

在执行任何JavaScript代码以构建图之前，您需要加载GoJS库。当你引入库时,"go" JavaScript 对象将包含所有GoJS类型。在开发过程中，我们建议您加载“ go-debug.js”而不是“ go.js”，以获得更多的运行时错误检查和调试功能。

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

  <!DOCTYPE html>  <!-- Declare standards mode. -->
  <html>
    <head>
    . . .
    <!-- Include the GoJS library. -->
    <script src="go-debug.js"></script>

如果你使用 RequireJS, GoJS 支持UMD模块定义可以查看 Require 示例此外，扩展类的模块化版本现在可以在访问../extensionsTS/, 该扩展类已转换为TypeScript并编译为.js可import编辑的文件. 或者require

在ES6（ECMAScript 2015）或TypeScript代码中，只需导入go.js库:

import * as go from "./path/to/gojs/release/go";

或者使用npm的方式:

import * as go from "gojs";

如果要使用ES6模块，使用 go.mjs 在 ../release/ 目录. 扩展类也可以在 ../extensionsJSM/ 目录中作为ES6模块使用.

    import * as go from "./path/to/gojs/release/go.mjs";
    import { DoubleTreeLayout } from "./path/to/gojs/extensionsJSM/DoubleTreeLayout.js";

在Div元素中托管GoJS

每个Diagram必须由HTML Div元素托管 GoJS 将管理该Div元素的内容但您可以像放置任何HTML元素一样对Div进行定位，设置大小和样式。该图将向该图将在其中绘制的Div元素添加一个Canvas元素-这是用户实际看到的。Canvas元素会自动调整大小，使其具有与Div元素相同的大小。

  <body>
    . . .
    <!-- The DIV for a Diagram needs an explicit size or else we won't see anything.
         In this case we also add a border to help see the edges. -->
    <div id="myDiagramDiv" style="border: solid 1px blue; width:400px; height:150px"></div>

然后，您可以在JavaScript中使用对该Div元素的引用来创建Diagram 通过构造普通的JavaScript对象并将其添加到图的模型来构建图请注意，JavaScript代码中对GoJS类型（例如Diagram）的所有引用均以"go." 作为前缀。

  <!-- Create the Diagram in the DIV element using JavaScript. -->
  <!-- The "go" object is the "namespace" that holds all of the GoJS types. -->
  <script>
    var diagram = new go.Diagram("myDiagramDiv");
    diagram.model = new go.GraphLinksModel(
      [{ key: "Hello" },   // two node data, in an Array
       { key: "World!" }],
      [{ from: "Hello", to: "World!"}]  // one link data, in an Array
    );
  </script>

这样就完成了“ Hello World！”的实现。您在上方看到的实时图表。

开发你的Diagram

发生问题时，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.js" 和 "go-debug.js" 库位于同一目录中。在某些编辑器中，访问定义文件还可以极大地改善编辑TypeScript代码时的文档反馈。扩展类也已转换为TypeScript可以从../extensionsTS/下载

要了解新功能和错误修复，请阅读 Change Log. 在 Downloads中了解有关获取最新版本的信息。

你可以看到可以在 GoJS Samples上构建的各种图表.

在下一个简介页面中，我们将讨论 building GoJS Parts and adding them into Diagrams.