力导向布局配置选项

此示例演示了对力导向布局参数的实时控制，包括节点斥力、线条弹性、碰撞检测和布局迭代设置。

力导向布局配置选项

功能概述

此示例展示了如何在 relation-graph 中动态配置和调整力导向布局参数。它提供了对基于物理的布局设置的实时控制，包括节点斥力、线条弹性、布局迭代次数和碰撞检测。

核心特性实现

1. 力布局参数配置

const [myForceLayoutOptions, setMyForceLayoutOptions] = React.useState<MyForceLayoutOptionsProps>({
    force_node_repulsion: 1,      // 节点间斥力强度
    force_line_elastic: 1,        // 线条弹性强度
    maxTractionLength: 400,       // 线条具有最大力时的最大牵引长度
    zeroForceLength: 40,          // 线条零力时的长度
    maxRepulsionDistance: 600,    // 斥力消失的距离
    nodeCollisionRadius: 40       // 节点间的强制距离
});

2. 动态布局选项更新

通过 graphInstance.layoutor 访问力布局实例：

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

3. 布局控制模式

配置布局持续运行或固定迭代次数：

graphInstance.updateOptions({
    layout: {
        layoutName: 'force',
        maxLayoutTimes: layoutForever ? Number.MAX_SAFE_INTEGER : maxLayoutTimes
    }
});

4. 力权重配置

为节点添加自定义 force_weight 属性以影响其在力布局中的位置：

{
    id: 'root',
    text: 'Root',
    force_weight: 600,  // 更重的节点抵抗移动更多
    width: 80,
    height: 80
}

5. 线条弹性控制

在线条上设置 force_elastic 属性以控制其类似弹簧的行为：

{
    id: 'line-1',
    from: 'a',
    to: 'b',
    force_elastic: 2.5,  // 较高值 = 更强吸引力
    lineWidth: 0.5 + force_elastic
}

创意使用场景

• 社交网络分析：调整斥力和弹性以揭示社区结构
• 知识图谱可视化：微调布局以最小化边交叉
• 组织架构图：平衡节点间距以获得层次清晰度
• 网络拓扑映射：优化电信或基础设施网络的布局
• 分子结构可视化：使用适当的力参数模拟原子相互作用
• 依赖关系图分析：控制间距以突出关键路径