多个布局 - 比较不同的布局算法

多布局算法比较

功能概述

本示例演示应用于同一图数据的不同布局算法的并排比较。用户可以看到力导向、树形、圆形和分层布局如何不同地排列相同节点，帮助他们为数据选择最佳布局。

核心特性实现

布局运行器

const runAllLayouts = async () => {
    const layouts = ['force', 'tree', 'circle', 'center'];
    const results = {};

    for (const layoutName of layouts) {
        // 克隆原始数据
        const jsonData = JSON.parse(JSON.stringify(originalData));

        // 应用布局
        graphInstance.updateOptions({ layout: { layoutName } });
        await graphInstance.setJsonData(jsonData);
        await graphInstance.doLayout();

        // 捕获位置
        results[layoutName] = graphInstance.getNodes().map(n => ({
            id: n.id,
            x: n.x,
            y: n.y
        }));
    }

    return results;
};

比较视图

const renderComparison = () => {
    const layoutResults = runAllLayouts();

    return (
        <div className="comparison-grid">
            {Object.entries(layoutResults).map(([layoutName, positions]) => (
                <div key={layoutName} className="layout-panel">
                    <h3>{layoutName} Layout</h3>
                    <MiniGraph nodes={positions} />
                </div>
            ))}
        </div>
    );
};

创意使用场景

布局选择：帮助用户选择最佳布局算法。

算法研究：比较布局算法特性。

教学：演示不同算法如何工作。

数据探索：揭示数据中的不同模式。

演示：同时显示多个视角。