Relation Graph

功能概述

本示例展示了一个高级力导向图可视化，具有动态数据分组和聚类功能。它实现了自定义力布局算法，可以根据多个维度（地区、专业、年级、性别）自动对节点进行分组和聚类。当用户在不同分组标准之间切换时，可视化会实时重新计算布局，非常适合分析多维分类数据。

核心特性实现

自定义力布局实现

该演示通过创建自定义的 MyForceLayout 类来扩展内置的力布局，该类与 relation-graph 的布局系统集成：

const myLayout = new MyForceLayout({
    maxLayoutTimes: Number.MAX_SAFE_INTEGER,
    force_node_repulsion: 0.4,
    force_line_elastic: 0.1
}, graphInstance.getOptions(), graphInstance);

graphInstance.setLayoutor(myLayout, true, true);
const rootNode = graphInstance.getNodeById('a');
myLayout.placeNodes(graphInstance.getNodes(), rootNode);

这使得布局可以持续运行，同时可以通过 relation-graph 的工具栏按钮进行控制（开始/停止布局）。

动态分组系统

核心功能是根据不同属性即时重新分组节点：

const updateGroupByValue = async () => {
    graphInstance.stopAutoLayout();
    // 更新节点分组属性
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNodeData(node, {
            currentGroupValue: node.data[currentGroupBy]
        });
    });
    // 重新启动力学计算
    setTimeout(async () => {
        graphInstance.startAutoLayout();
    }, 200);
};

当用户选择不同的分组标准（地区、专业、年级或性别）时，系统会更新每个节点数据中的 currentGroupValue 属性并重新启动力布局，使节点根据新的分组分配自然聚类。

多维节点样式

节点同时显示多个视觉属性：

const node: JsonNode = {
    id: 'u-' + graphInstance.generateNewNodeId(),
    text: userName,
    x: Math.random() * 300,
    y: Math.random() * 300,
    data: {
        userRegion: region.code,
        userRegionIcon: region.icon,
        userMajor: majors[Math.floor(Math.random() * majors.length)],
        userGrade: randomGrade.grade,
        userGender
    }
};
node.color = randomGrade.color;  // 颜色代表年级
node.nodeShape = userGender === 'Male' ? RGNodeShape.rect : RGNodeShape.circle;  // 形状代表性别
node.data.currentGroupValue = node.data[currentGroupBy];  // 当前分组字段

这使得力布局可以根据活动分组标准对节点进行聚类，同时为其他维度保持视觉区分。

丰富的节点插槽渲染

该演示使用 RGSlotOnNode 创建复杂的节点显示：

<RGSlotOnNode>
    {({ node }) => (
        <div className="px-6 py-1 w-full h-full flex place-items-center justify-center text-xs">
            <div className="px-3 py-0.5 bg-gray-100 bg-opacity-30 rounded text-black text-sm">
                {node.text}
            </div>
            <div className="absolute left-[-3px] top-[-3px] h-4 w-4 border border-gray-900 bg-gray-600 rounded text-white text-sm flex place-items-center justify-center">
                {node.data.userMajor.substring(0, 1).toUpperCase()}
            </div>
            <div className="absolute right-[-3px] bottom-[-3px] text-xl">
                {node.data.userRegionIcon}
            </div>
        </div>
    )}
</RGSlotOnNode>

每个节点显示用户名称、专业缩写（左上角徽章）和地区标志（右下角图标）。

交互式图例面板

DataLegendPanel 组件为所有数据维度提供视觉参考：

<RGSlotOnView>
    <div className="pointer-events-auto absolute top-2 left-2">
        <DataLegendPanel />
    </div>
</RGSlotOnView>

面板显示年级的颜色编码、地区的图标参考、专业的徽章样式和性别的形状指示器，使可视化自我解释。

创意使用场景

客户细分分析

将此技术应用于客户数据，维度包括购买类别、忠诚度等级、地理区域和客户类型。在不同分组标准之间切换，以识别跨细分市场的模式，例如特定地区的高价值客户或特定人群偏好的产品类别。

组织网络分析

用于可视化组织结构，其中节点按部门、地点、角色级别或团队分组的员工。在不同分组之间切换可以揭示孤立的沟通模式、跨职能协作集群或专业知识的地理分布。

社交媒体社区检测

实施社交网络分析，其中用户按兴趣类别、参与度级别、平台或社区成员身份分组。这有助于识别微型社区、了解内容传播模式并检测不同细分中的有影响力的用户。

产品特征关联分析

适应于电子商务产品分析，产品按类别、价格范围、品牌或客户评级分组。这种可视化可以揭示产品亲和力，并帮助优化产品捆绑策略。

学术研究合作映射

在研究机构中用于可视化研究人员之间的合作，按研究领域、机构、职业阶段或资金来源分组。这可以识别跨学科合作机会和研究网络空白。

分类器