带矩形背景的节点分组

演示创建带有矩形背景形状的可视化节点分组，以组织相关节点。

带矩形背景的节点分组

功能概述

本示例演示如何创建带有矩形背景形状的节点可视化分组。与区域背景类似，但使用矩形形状在视觉上对相关节点进行分组。

核心特性实现

矩形分组可视化

使用画布插槽渲染，将分组渲染为相关节点背后的矩形形状。

带动态分组的力导向布局

const graphOptions: RGOptions = {
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeColor: 'rgb(130,102,246)',
    layout: {
        layoutName: 'force',
        maxLayoutTimes: Number.MAX_SAFE_INTEGER
    }
};

动态分组创建

单击节点创建包含它们及其相关节点的分组，并使用矩形背景渲染。

创意使用场景

模块边界：可视化软件模块边界。矩形显示封装边界。

团队区域：在组织架构图中显示团队成员区域。矩形背景表示团队区域。

网段：使用矩形区域显示网段。网络区域的清晰视觉分隔。

流程阶段：按阶段对流程步骤进行分组。矩形显示阶段边界。

安全区域：在网络拓扑中可视化安全区域。不同的矩形颜色表示安全级别。

地理区域：使用矩形区域显示地理分组。将区域映射到网络拓扑。

部门区域：在组织架构图中显示部门区域。清晰的视觉部门边界。

泳道：创建泳道风格的可视化。矩形充当泳道边界。