Relation Graph

功能概述

此示例演示了具有动态参数调整的力导向布局，可创建动画"海葵"效果。图每 3 秒自动在不同的布局参数配置之间循环，导致节点有节奏地像海葵触手一样扩张和收缩。这展示了运行时布局参数更改如何在图可视化中创建有机的、呼吸的动画。

核心特性实现

动态布局参数更新

核心功能是在不同力布局配置之间自动循环：

const updateLayoutorOptions = async () => {
    const opts = [[0.2, 2], [1, 0.2]];
    const opt = opts[optIndex.current++];
    if (optIndex.current >= opts.length) {
        optIndex.current = 0;
    }

    graphInstance.updateOptions({
        layout: {
            layoutName: 'force',
            force_node_repulsion: opt[0],
            force_line_elastic: opt[1]
        }
    });
};

第一个配置 [0.2, 2] 具有低节点斥力和高线条弹性，导致节点紧密聚集。第二个配置 [1, 0.2] 具有高节点斥力和低线条弹性，导致节点分散开。自动切换创建呼吸/脉动动画。

连续布局执行

布局连续运行以允许平滑的参数转换：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'force',
        maxLayoutTimes: 30000, // 非常高的值以实现连续动画
        force_node_repulsion: 1,
        force_line_elastic: 1
    }
};

将 maxLayoutTimes 设置为非常高的值（30,000 次迭代）确保力布局持续运行，允许参数更改立即生效。

基于间隔的自动化

参数更改使用 setInterval 自动触发：

useEffect(() => {
    initializeGraph();
    const resizeTimer = setInterval(async () => {
        await updateLayoutorOptions();
    }, 3000);

    return () => {
        clearInterval(resizeTimer);
    };
}, []);

3 秒间隔为图在每个配置处稳定提供了足够的时间，然后再切换到下一个。清理函数在组件卸载时清除间隔。

大型树结构数据集

该演示使用实质性的分层数据集（100+ 节点）和清晰的树结构：

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* 100 个具有树结构的节点 */],
    lines: [/* 连接树结构的线条 */]
        .map((line, index) => ({ ...line, id: `line_${index}` }))
};

树结构在画布上提供良好的节点分布，使扩张/收缩效果在视觉上更加明显。

创意使用场景

环境数据可视化

为大厅、公共空间或数字艺术装置创建环境可视化，其中温和的呼吸运动提供视觉兴趣而不需要注意力。自动循环创造了冥想般的、不断变化的显示。

系统健康监控

适应于监控仪表板，其中呼吸动画代表系统"活力"。例如，使用更快/更慢的呼吸周期来指示系统负载，或根据健康状况更改颜色方案，同时保持有机运动。

演示和讲故事

使用自动转换逐渐揭示网络结构的不同方面。在演示期间，扩张/收缩运动可以在不同集群或关系变得更加或更加分散时吸引注意力。

压力测试和性能演示

通过展示大型数据集的平滑、连续布局更新来演示图可视化系统的性能能力。这对于销售演示或技术展示很有用。

生物过程模拟

适应于科学可视化生物过程，如细胞呼吸、肌肉收缩或种群动态。有节奏的扩张和收缩可以自然地代表这些有机过程。

后台加载动画

用作加载数据或处理时引人入胜的背景动画。有机运动指示活动并提供系统正在工作的视觉反馈。

小玩意-海葵