GoJs分组绘图模板go.Group如何使用

GoJs 是一个强大的 JavaScript 库，用于创建交互式的图表和图形。它提供了丰富的功能，包括节点、链接、分组、布局等。其中，go.Group 是 GoJs 中用于创建分组的一个重要类。本文将详细介绍如何使用 go.Group 来创建和管理分组。

1. 什么是 go.Group？

go.Group 是 GoJs 中的一个类，用于将多个节点和链接组合在一起，形成一个逻辑上的分组。分组可以嵌套，即一个分组可以包含其他分组。分组在图表中通常用于表示层次结构、模块化设计或任何需要将多个元素组合在一起的场景。

2. 创建分组

要创建一个分组，首先需要实例化一个 go.Group 对象，并将其添加到图表中。以下是一个简单的示例：

const $ = go.GraphObject.make;

const diagram = $(go.Diagram, "myDiagramDiv");

// 创建一个分组
const group = $(go.Group, "Vertical",
  {
    background: "lightblue",
    isSubGraphExpanded: true // 默认展开分组
  },
  $(go.TextBlock, "Group Title", { font: "bold 14px sans-serif" }),
  $(go.Panel, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "white" }),
    $(go.Placeholder, { padding: 5 })
  )
);

// 将分组添加到图表中
diagram.add(group);

在这个示例中，我们创建了一个垂直布局的分组，并设置了背景颜色和默认展开状态。分组包含一个标题和一个占位符，用于容纳子节点。

3. 添加子节点到分组

要将节点添加到分组中，可以使用 group.add 方法。以下是一个示例：

const node1 = $(go.Node, "Auto",
  $(go.Shape, "Rectangle", { fill: "lightgreen" }),
  $(go.TextBlock, "Node 1", { margin: 5 })
);

const node2 = $(go.Node, "Auto",
  $(go.Shape, "Rectangle", { fill: "lightyellow" }),
  $(go.TextBlock, "Node 2", { margin: 5 })
);

// 将节点添加到分组中
group.add(node1);
group.add(node2);

在这个示例中，我们创建了两个节点，并将它们添加到之前创建的分组中。

4. 分组的展开与折叠

分组可以展开或折叠，以显示或隐藏其内容。可以通过设置 isSubGraphExpanded 属性来控制分组的展开状态。以下是一个示例：

group.isSubGraphExpanded = false; // 折叠分组

此外，用户可以通过点击分组标题来手动展开或折叠分组。

5. 分组的布局

分组可以设置不同的布局，以控制其子节点的排列方式。GoJs 提供了多种布局类型，如 go.TreeLayout、go.ForceDirectedLayout、go.LayeredDigraphLayout 等。以下是一个使用 go.TreeLayout 的示例：

group.layout = $(go.TreeLayout, {
  angle: 90,
  layerSpacing: 35,
  nodeSpacing: 10
});

在这个示例中，我们将分组的布局设置为树状布局，并设置了角度、层间距和节点间距。

6. 分组的样式与外观

可以通过设置分组的样式和外观来定制其显示效果。例如，可以设置分组的背景颜色、边框、阴影等。以下是一个示例：

group.background = "lightblue";
group.stroke = "darkblue";
group.strokeWidth = 2;
group.shadowBlur = 5;
group.shadowColor = "rgba(0, 0, 0, 0.5)";

在这个示例中，我们设置了分组的背景颜色、边框颜色、边框宽度、阴影模糊度和阴影颜色。

7. 分组的嵌套

分组可以嵌套，即一个分组可以包含其他分组。以下是一个嵌套分组的示例：

const innerGroup = $(go.Group, "Vertical",
  {
    background: "lightpink",
    isSubGraphExpanded: true
  },
  $(go.TextBlock, "Inner Group Title", { font: "bold 12px sans-serif" }),
  $(go.Panel, "Auto",
    $(go.Shape, "RoundedRectangle", { fill: "white" }),
    $(go.Placeholder, { padding: 5 })
  )
);

// 将内部分组添加到外部分组中
group.add(innerGroup);

在这个示例中，我们创建了一个内部分组，并将其添加到之前创建的外部分组中。

8. 分组的交互

分组支持多种交互操作，如拖拽、缩放、旋转等。可以通过设置分组的 resizable、rotatable 等属性来控制其交互行为。以下是一个示例：

group.resizable = true;
group.rotatable = true;

在这个示例中，我们设置了分组可以调整大小和旋转。

9. 分组的删除

要删除一个分组及其所有子节点，可以使用 diagram.remove 方法。以下是一个示例：

diagram.remove(group);

在这个示例中，我们从图表中删除了之前创建的分组。

10. 总结

go.Group 是 GoJs 中用于创建和管理分组的重要类。通过使用 go.Group，可以将多个节点和链接组合在一起，形成一个逻辑上的分组。分组支持多种布局、样式和交互操作，可以满足各种复杂的图表需求。希望本文能帮助你更好地理解和使用 go.Group。