Relation Graph

功能概述

此示例展��了力导向布局算法，它模拟物理力场来自然地排列节点。节点之间有斥力，连接线有弹性拉力，通过这两种力的平衡实现自动布局。布局可以持续运行（无限迭代）或在指定次数后停止。用户可以实时调整斥力和弹性系数，观察图的动态变化。

核心特性实现

力导向布局配置

使用 force 布局类型：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'force',
        maxLayoutTimes: Number.MAX_SAFE_INTEGER  // 持续运行
    }
};

设置最大迭代次数为安全整数上限，实现持续布局。

动态参数调整

通过 layoutor 实例实时更新布局参数：

const updateMyOptions = async () => {
    const forceLayout = graphInstance.layoutor as InstanceType<typeof RGLayouts.ForceLayout>;
    if (forceLayout) {
        forceLayout.updateOptions(myForceLayoutOptions);
    }
};

这允许在不重新初始化布局的情况下调整参数。

布局持续时间控制

选择持续布局或固定次数布局：

const restartForceLayout = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: 'force',
            maxLayoutTimes: layoutForever ? Number.MAX_SAFE_INTEGER : maxLayoutTimes
        }
    });
    await graphInstance.doLayout();
};

<SimpleUISelect
    currentValue={layoutForever}
    data={[
        { value: true, text: 'Layout Forever' },
        { value: false, text: `Layout Fixed Times(${maxLayoutTimes})` }
    ]}
    onChange={(newValue: boolean) => { setLayoutForever(newValue); }}
/>

用户可以选择让布局持续优化或在指定迭代后停止。

迭代次数滑块

当不使用持续布局时，可以设置固定迭代次数：

<input
    type="range"
    min="10"
    max="1000"
    step="20"
    value={maxLayoutTimes}
    onChange={(event) => { setMaxLayoutTimes(Number(event.target.value)); }}
/>

范围从 10 到 1000 次，步长为 20。

力参数组件

使用 MyForceLayoutOptions 组件提供详细的力参数控制：

<MyForceLayoutOptions
    myOptions={myForceLayoutOptions}
    myOptionsUpdater={setMyForceLayoutOptions}
/>

该组件可能包含斥力、弹性、重力等参数的滑块控制。

大型数据集处理

示例包含超过 200 个节点的大量数据：

const rawNodes = [
    { id: 'a', text: 'a' },
    { id: 'b', text: 'b' },
    // ... 200+ 节点
];

const rawLines = [
    { from: 'a', to: 'b' },
    // ... 200+ 连接
];

大型数据集展示了力导向布局处理复杂图的能力。

响应式参数更新

使用 useEffect 监听参数变化：

useEffect(() => {
    updateMyOptions();
}, [myForceLayoutOptions]);

useEffect(() => {
    restartForceLayout();
}, [maxLayoutTimes, layoutForever]);

参数改变时自动更新布局行为。

创意使用场景

社交网络分析

可视化大型社交网络，力导向布局会自然地将关系紧密的人群聚集在一起，形成社区结构。

知识图谱探索

展示概念之间的关系，相似的概念会自动靠近。适合研究和教育工具。

蛋白质相互作用网络

在生物信息学中展示蛋白质之间的相互作用，帮助识别功能模块和通路。

引用网络分析

展示学术论文或专利之间的引用关系，识别研究热点和影响力网络。

供应链网络

可视化供应商、制造商、分销商之间的关系，识别关键的供应链节点。

网络安全分析

展示网络设备、服务器、攻击路径之间的关系，识别安全风险区域。

金融市场关联

展��股票、债券、商品等金融工具之间的相关性，识别系统性风险。

软件依赖分析

可视化软件模块、库、服务之间的依赖关系，识别架构中的关键组件。

社交媒体影响力

展示用户、帖子、话题之间的互动关系，识别影响力节点和传播路径。

大脑神经网络

展示神经元之间的连接，帮助理解大脑功能和神经网络结构。

语义网络

展示词语、概念、实体之间的语义关系，用于自然语言处理和搜索引擎。

力学布局(force)

力导向物理布局