Relation Graph

功能概述

这个增强版的力导向分类器引入了渐进式节点添加、动画视觉效果和实时图演化功能。与一次性初始化所有节点的基本版本不同，此演示根据当前图的大小动态地随时间添加节点，并具有自适应时序调整。它还使用 SVG 滤镜和放置在画布上的径向渐变背景元素展示装饰性的电光边框效果。

核心特性实现

自适应时序的渐进式节点添加

该演示实现了一个智能节点生成系统，可根据图的复杂度调整其速度：

const startGenerateNodes = () => {
    const currentNodesCount = graphInstance.getNodes().length;
    if (currentNodesCount > 300) {
        return; // 达到最大容量时停止
    }
    const speed = currentNodesCount < 60 ? 100 : (currentNodesCount < 120 ? 500 : 1000);
    generateNewNodeTimerRef.current = setTimeout(() => {
        graphInstance.stopAutoLayout();
        const randomUsers = generateNodes(1);
        randomUsers.forEach(n => {
            n.x = 0;
            n.y = 0;
        });
        graphInstance.addNodes(randomUsers);
        graphInstance.startAutoLayout();
        startGenerateNodes();
    }, speed);
};

自适应速度机制在图稀疏时快速添加节点（100ms 间隔），然后随着图的增长减慢（500ms，然后 1000ms），确保流畅的性能和视觉上令人愉悦的进展。

电光边框效果的装饰性画布元素

该演示展示了如何使用 RGSlotOnCanvas 向图画布添加纯装饰性元素：

<RGSlotOnCanvas>
    <div className="absolute -top-10 -left-10">
        <ElectricBorderCard width={'200px'} height={'200px'} borderRadius="50%">
            <div className="w-full h-full rounded-full bg-[radial-gradient(circle_at_center,rgba(99,102,241,0.9)_0%,rgba(99,102,241,0.4)_35%,rgba(99,102,241,0.15)_55%,rgba(99,102,241,0.05)_70%,transparent_75%)]" />
        </ElectricBorderCard>
    </div>
</RGSlotOnCanvas>

这创建了一个带有动画电光边框的径向渐变"发光"效果，使用 SVG 滤镜实现。该元素位于正常画布区域之外（-top-10 -left-10），以创建装饰性角点装饰，不会干扰图内容。

清理和生命周期管理

适当的定时器清理可防止内存泄漏：

useEffect(() => {
    callOnceFunction(() => {
        initializeGraph();
    });
    return () => {
        clearInterval(generateNewNodeTimerRef.current);
    };
}, []);

清理函数确保在组件卸载时正确清除节点生成定时器。

基于 React 的状态管理

该演示使用 React 的 useRef 独立于重新渲染跟踪当前分组字段：

const groupBy = React.useRef('userRegion');

const onClick={() => {
    groupBy.current = item.code;
    setCurrentGroupBy(item.code);
}}

这种模式允许分组逻辑访问最新值而不会触发不必要的重新渲染，而状态变量仍然驱动 UI 更新。

创意使用场景

实时数据流可视化

将此渐进式添加方法应用于实时数据可视化场景，如实时社交媒体信息流、事务监控或传感器网络。每个新节点可以代表一条新推文、事务或传感器读数，图会自动按类别、值范围或源组织它们。

动态网络增长模拟

用于研究或教育中的网络增长模拟场景。例如，模拟社交网络的增长、交通基础设施的扩展或发育生物学中神经连接的演化，节点随时间出现以展示网络如何自然演化。

数据探索中的渐进式披露

对于一次显示所有节点会过于庞大数据集实施此功能。根据用户交互（例如，悬停、单击或滚动）逐步揭示节点，允许用户按照自己的节奏探索数据，同时通过力布局保持空间组织。

讲故事和叙事可视化

使用渐进式节点添加创建动画视觉叙事。例如，展示疾病的爆发传播、创新的扩散或历史帝国的扩张，每个新节点代表故事中的一个时间事件。

性能测试和基准测试

调整自适应时序机制用于图渲染系统的性能测试。通过在逐步添加节点时测量帧速率和交互响应性，可以建立性能基线并识别大规模可视化的优化机会。

实时分类器