多组：从中心到力导向过渡

演示从中心布局到力导向布局的动态布局转换，以实现动画视觉效果。

多组布局：从中心到力导向过渡

功能概述

此示例演示了从中心布局到力导向布局的动态布局转换。它展示了如何在运行时切换不同的布局算法以产生视觉效果。

核心特性实现

1. 初始中心布局

从中心布局开始：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center',
        distanceCoefficient: 0.5  // 紧凑间距
    },
    defaultLineTextOnPath: true,
    defaultLineColor: '#000000'
};

2. 延迟布局转换

在初始化后切换到力布局：

const initializeGraph = async () => {
    await graphInstance.setJsonData(myJsonData);
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();

    setTimeout(() => {
        graphInstance.updateOptions({
            layout: {
                layoutName: 'force',
                force_node_repulsion: 0.3,
                force_line_elastic: 5,
                maxLayoutTimes: Number.MAX_SAFE_INFINITY
            }
        });
        graphInstance.doLayout();
    }, 500);
};

3. 力布局参数

配置力布局以实现平滑动画：

layout: {
    layoutName: 'force',
    force_node_repulsion: 0.3,    // 低斥力
    force_line_elastic: 5,         // 高弹性
    maxLayoutTimes: Number.MAX_SAFE_INFINITY  // 持续
}

4. 相同的分层数据

使用相同的多级数据结构：

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* 来自 multi-group 的所有节点 */],
    lines: [/* 来自 multi-group 的所有线条 */]
};

5. 视觉转换效果

当节点从其径向位置移动到力导向位置时，转换会创建动画效果。

创意使用场景

• 数据探索：从不同角度展示相同的数据
• 演示：创建引人入胜的视觉转换
• 布局比较：比较不同的布局算法
• 交互式可视化：允许用户切换视图
• 动画效果：创建平滑的视觉转换
• 分析：观察不同布局如何揭示模式