使用GraphObjects创建部件

你可以使用传统的JavaScript代码构建Node或其他类型的Part。 GoJS 还提供了一个更具声明性的构建组成部件的方式，它比代码有几个优点。.

下面页面将讨论可用于构建节点的基本对象类型. 这些页面通过显式创建和添加节点和链接来构建图 后面的页面将显示如何使用模型而不是使用此类代码来构建图。

首先，查看一个图，其中包含有关用于构建一些示例节点和链接的GraphObjects的注释:

如你所见，节点或链接可以由许多GraphObject组成, 包括可能嵌套的Panel 您可以在任何注释周围拖动，以查看GraphObject所指向的注释链接末尾的区域，链接本身内的GraphObjects除外。

用代码构建

GraphObject是一个JavaScript对象，可以像任何其他对象一样构造和初始化 Node是一个GraphObject 包含 GraphObjects 如 TextBlocks, Shapes, Pictures, and Panels 它们可能包含更多的GraphObjects.

一个非常简单的节点可能由一个形状和一个文本块组成 您可以使用以下代码构建GraphObjects的可视树： 

  var node = new go.Node(go.Panel.Auto);
  var shape = new go.Shape();
  shape.figure = "RoundedRectangle";
  shape.fill = "lightblue";
  node.add(shape);
  var textblock = new go.TextBlock();
  textblock.text = "Hello!";
  textblock.margin = 5;
  node.add(textblock);
  diagram.add(node);

这块代码产生下图。这是一个“实时”图，而不是屏幕快照图像，因此您可以单击该节点以选择它，然后将其拖动。

尽管以这种方式构建节点是可行的，但是随着节点变得越来越复杂，代码将变得更加难以阅读和维护。幸运的是，GoJS有一个更好的方法可以用GraphObjects制作部件。

此外，后面的部分将讨论如何使用模型，模板和数据绑定自动创建节点和链接。在此之前，这些页面将显式创建节点并将其直接添加到图。

使用GraphObject.make构建

GoJS 定义了一个静态函数GraphObject,make, 它在构造GraphObjects时非常有用 无需考虑和跟踪临时变量名。该静态函数还支持以嵌套方式构建对象，缩进为您提供了可视树深度的线索，这与上面显示的简单线性代码不同。

GraphObject.make是一个函数，其第一个参数必须是类类型，通常是GraphObject的子类

GraphObject.make的其他参数可能有以下几种类型

我们可以用go.GraphObject.make重写上面的代码，以产生完全相同的结果: 

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, go.Panel.Auto,
      $(go.Shape,
        { figure: "RoundedRectangle",
          fill: "lightblue" }),
      $(go.TextBlock,
        { text: "Hello!",
          margin: 5 })
    ));

使用字符串参数可以简洁一点: 

  var $ = go.GraphObject.make;
  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));

注意，我们如何仅使用字符串值来设置Panel.type，, Shape.figure, 和 TextBlock.text 属性。

使用 $ 作为 go.GraphObject.make 的缩写非常方便，从现在开始我们将假定使用它 将go.GraphObject.make 的调用最小化为单个字符有助于消除代码中的混乱，并使用缩进与正在构造的可视化树中 GraphObject的嵌套相匹配

其他一些JavaScript库自动将“$”定义为一个方便类型的函数名，假设它们是唯一重要的库。当然，你不能让同一个符号在同一时间同一范围内有两种不同的含义。因此，在使用GoJS时，您可能需要选择使用不同的短名称，例如“$$”或“GO”。GoJS文档和示例使用“$”，因为它使生成的代码最为清晰。

使用另一个优点GraphObject,make 是，它将确保您设置的任何属性都是在类上定义的属性。如果属性名称中有错字，它将引发错误，您可以在控制台日志中看到一条错误消息

GraphObject,make也可以用来构建除了从GraphObject继承的GoJS类。 这是一个使用go.GraphObject.make构建一个Brush而不是GraphObject子类的例子。 

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: $(go.Brush, "Linear",
                  { 0.0: "Violet", 1.0: "Lavender" }) }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

使用GraphObject,make来构建一个Diagram也很常见 在这样的用法中，字符串参数（如果提供该参数必须是第二个参数）将命名图应使用的DIV HTML元素 同样，您可以将直接引用DIV元素作为第二个参数。

另外，在图上设置属性时，可以使用属性名称，这些属性名称是由用句点分隔的两个标识符组成的字符串。 句点之前的名称用作图表上的属性的名称，或者用作返回要设置其属性的对象的Diagram.toolManager。句号之后的名称是设置的属性的名称。请注意，由于存在嵌入式句点，因此JavaScript属性语法要求使用引号。

你还可以声明DiagramEvent侦听器, 就好像调用 Diagram.addDiagramListener, 假装设置一个Diagram属性，该属性实际上是一个DiagramEvent的名称。因为所有的DiagramEvent都有大写的名字，所以这些名字不会和任何图表属性名称冲突。

这是GraphObject.make的广泛用法，用于构建图 

  var myDiagram =
    $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
      {
        // don't initialize some properties until after a new model has been loaded
        "InitialLayoutCompleted": loadDiagramProperties,  // a DiagramEvent listener

        // have mouse wheel events zoom in and out instead of scroll up and down
        "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,

        // specify a data object to copy for each new Node that is created by clicking
        "clickCreatingTool.archetypeNodeData": { text: "new node" }
      });

  // the DiagramEvent listener for "InitialLayoutCompleted"
  function loadDiagramProperties(e) { . . . }

有使用初始化GraphObject,make仍然是JavaScript代码，因此我们可以调用函数并轻松共享画笔等对象： 

  var violetbrush = $(go.Brush, "Linear", { 0.0: "Violet", 1.0: "Lavender" });

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle",
        { fill: violetbrush }),
      $(go.TextBlock, "Hello!",
        { margin: 5 })
    ));

  diagram.add(
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse",
        { fill: violetbrush }),
      $(go.TextBlock, "Goodbye!",
        { margin: 5 })
    ));

Brush和Geometry 对象可以共享, 但是 GraphObject不可以被共享.

以下页面将提供有关基本构建TextBlock, Shape, 和 Picture, 的更多详细信息，以及它们与Panel 类聚合的方法