Dagre 布局集成 - 有向无环图的分层布局

Dagre 布局集成

功能概述

本示例演示 Dagre（有向图）布局算法与关系图的集成。Dagre 专长于有向无环图（DAG）的分层布局，使其成为流程图、状态机和依赖关系图的理想选择。

核心特性实现

Dagre 集成

import dagre from 'dagre';

const applyDagreLayout = () => {
    const g = new dagre.graphlib.Graph();
    g.setGraph({ rankdir: 'TB', nodesep: 50, edgesep: 10, ranksep: 50 });

    // 向 dagre 图添加节点
    graphInstance.getNodes().forEach(node => {
        g.setNode(node.id, { width: node.width, height: node.height });
    });

    // 向 dagre 图添加边
    graphInstance.getLines().forEach(line => {
        g.setEdge(line.from, line.to);
    });

    // 计算布局
    dagre.layout(g);

    // 应用的计算位置
    g.nodes().forEach(nodeId => {
        const node = g.node(nodeId);
        graphInstance.updateNode(nodeId, {
            x: node.x,
            y: node.y
        });
    });
};

分层组织

const layoutOptions = {
    rankdir: 'TB',  // 从上到下
    nodesep: 70,    // 同级节点之间的间距
    ranksep: 100,   // 层级之间的间距
    edgesep: 10     // 平行边之间的间距
};

创意使用场景

流程图：专业的图表布局。

状态机：清晰的状态转换可视化。

构建系统：依赖关系图可视化。

流水线：数据流和处理阶段。

组织架构图：整洁的层级结构。