带区域背景的节点分组

演示通过单击节点将相关节点分组在一起，创建带有背景区域的可视化节点分组。

带区域背景的节点分组

功能概述

本示例演示如何创建带有背景区域的节点可视化分组。单击节点会自动创建一个包含该节点及其相关节点的组，并通过背景形状进行可视化。

核心特性实现

节点单击时创建分组

const onNodeClick = (nodeObject: RGNode) => {
    createNodeGroup(nodeObject.id);
};

const createNodeGroup = (nodeId: string) => {
    const groupCoreNode = graphInstance.getNodeById(nodeId);
    if (!groupCoreNode) return;
    const relatedNodes = graphInstance.getNodeRelatedNodes(groupCoreNode);
    const groupNodes = [groupCoreNode, ...relatedNodes];
    const groupId = 'my-group-' + groupCoreNode.id;

    setMyNodeGroups(prev => {
        if (prev.some(g => g.groupId === groupId)) return prev;
        const nextGroups = [...prev, { groupId, groupNodes }];
        return nextGroups.length > 3 ? nextGroups.slice(1) : nextGroups;
    });
};

用于背景分组的画布插槽

<RGSlotOnCanvas>
    {myNodeGroups.map(thisGroup => (
        <GroupAreaBackground key={thisGroup.groupId} group={thisGroup} />
    ))}
</RGSlotOnCanvas>

力导向布局配置

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

创意使用场景

聚类分析：通过单击节点可视化数据聚类。组显示带有背景高亮的相关数据点。

社交网络分析：单击一个人查看他们的社交圈。背景区域突出显示社区聚类。

知识领域：单击一个概念查看其领域。组显示相关概念和子域。

网络分段：单击一个设备查看其网段。网络组的可视化隔离。

项目团队：单击团队成员查看他们的团队。组显示团队组成和关系。

功能分组：单击一个功能查看相关功能。帮助理解功能依赖关系和模块。

主题聚类：单击文档查看类似文档。相关内容的可视化分组。

地理区域：单击位置查看其区域。背景区域显示地理分组。