分组（groups）

使用组Group 类将节点Node和连线Link的集合视为单个节点,组中的节点和线作为组的成员,它们一起构成子图,类似图表Diagram

但子图 不是 另一个图表 Diagram,因此组的子图没有单独的HTML Div元素.
All of the Parts that are members of a Group belong to the same Diagram as the Group.
成员节点和组外节点之间以及组本身和其他节点之间可以有链接。成员节点和包含的组之间甚至可以有链接。

组还可以折叠和展开，以隐藏或显示成员部分。

The member parts of a group are available via the Group.memberParts property. Conversely, the Part.containingGroup property refers to the group, if the part belongs to one. A part can be member of at most one group at a time. You can set that property in order to add that part to a group. However you must make sure that no group contains itself, either directly or indirectly through other groups.

Because every Group is a Node, you can have nested groups. Although member Nodes and Links belong to the Group that contains them, they are not in the visual tree of the group -- their GraphObject.panel is null and no member part is in the group's Panel.elements collection. No Part can be in the visual tree of another Part. Parts normally do belong directly to one Layer.

See samples that make use of Groups in the samples index.

组常见问题

//单组模板定义
myDiagram.groupTemplate =$(go.Group,...);
//多个组模板定义,"OfGroup1"为组模板的分类,在json用category指定组使用的模板
myDiagram.groupTemplateMap.add("OfGroup1",$(go.Group,...));
myDiagram.model = new go.GraphLinksModel(
        [{ key: "-1", text: "组1", isGroup: true,category:"OfGroup1"}]);

简单的组

In a GraphLinksModel the Model.nodeDataArray holds node data, each of which might be represented by a Group rather than by a regular Node. You can declare that it should be a group by setting the isGroup data property to true. You can declare that a node data be a member of a group by referring to the group's key as the group data property value.

Here is a group containing two nested groups as well as two regular nodes.
如果移动一个组，它的成员部件就会移动。
如果复制一个组，它的成员部分也将被复制。
如果删除一个组，它的成员部分也将被删除。
如果移动一个成员节点，其包含的组其大小将膨胀或收缩，以覆盖所有成员占用的区域。

  diagram.model.nodeDataArray = [
    { key: "Alpha", isGroup: true },
    { key: "Beta", group: "Alpha" },
    { key: "Gamma", group: "Alpha", isGroup: true },
    { key: "Delta", group: "Gamma" },
    { key: "Epsilon", group: "Gamma" },
    { key: "Zeta", group: "Alpha" },
    { key: "Eta", group: "Alpha", isGroup: true},
    { key: "Theta", group: "Eta" }
  ];

因为组 Group也是一个节点 Node,所以连线 Link 既可以与普通节点链接，也可以与组链接。
Here is a simple example of four regular nodes and one group node. In this example the link from "Alpha" goes directly to the "Beta" node, but the link to "Delta" actually comes from the "Omega" group rather than from any particular member of the group.

If you drag the "Delta" node around you can see how the link from the "Omega" group appears to come from the center of the group and start at the group's edge rather than at any member node. This is different than for the link from "Alpha" to "Beta".

Note also how the link from "Beta" to "Gamma" is effectively owned by the "Omega" group because both of the nodes are owned by that group. Copying the group automatically copies the link too.

This example did not set any of the following properties: Diagram.nodeTemplate, Diagram.groupTemplate, and Diagram.linkTemplate, in order to demonstrate the default templates for all kinds of node data and link data.

组模板

Here is an example of how one might define templates for nodes and for groups. The node template is very simple: some text inside an ellipse. The group template is different from a node template in several aspects.

First, the group template builds a go.Group, not a go.Node or go.Part. The group can use a number of the panel types, just as a node may use various panel types.

组模板包含一个占位符对象Placeholder,该对象(在该组模板的定义中只能有一个)获取成员部件边界的并集的大小和位置， 以及设置组的内边距padding。无论成员节点位于何处，占位符的使用都会始终围绕组成员集合的组。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key"))
    );

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",  // 围绕着占位符Placeholder
          { parameter1: 14,
            fill: "rgba(128,128,128,0.33)" }),
        $(go.Placeholder,    //占位符,表示所有构件的面积，
          { padding: 5})  // 添加内边距
      ),
      $(go.TextBlock,         // group title
        { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key"))
    );

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", group: "Omega" },
    { key: "Gamma", group: "Omega" },
    { key: "Omega", isGroup: true },
    { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
    { from: "Omega", to: "Delta" }  // from the Group to a Node
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

注意，当您移动“Beta”或“Gamma”节点时，“Omega”组会自动调整大小，使组中的文本块位于“round dedrectangle”形状的右下方。

和图表 Diagram有布局Layout一样, 组 Group也有自己的布局 Group.layout. 使用方法在组作为子图例子中有描述

加入 GoJS 交流群
GoJS 交流群 （769862113）