Relation Graph

功能概述

此示例演示了如何实现完全自定义的布局算法。通过设置布局为 fixed 模式，可以使用自己的算法来计算并设置每个节点的 x、y 坐标位置。本示例展示了一个企业关系图的自定义布局，包括股东、人员、投资和分支机构的可视化。用户可以通过滑块调整布局参数，实时查看布局效果。

核心特性实现

固定布局模式

使用 fixed 布局类型以手动控制节点位置：

const userGraphOptions: RGOptions = {
    layout: {
        layoutName: 'fixed'
    }
};

在固定模式下，布局引擎不会自动计算节点位置，而是使用手动设置的坐标。

自定义布局函数

创建自定义布局算法计算节点位置：

const applyMyLayout = () => {
    const leafNodeInitialWidth = 400;
    const nodes = graphInstance.getNodes();
    const nodesPosition = applyLayout(
        nodes,
        leafNodeInitialWidth,
        leafLineLength,
        leafNodeGap
    );
    for (const nodePos of nodesPosition) {
        graphInstance.updateNode(nodePos.nodeId, {
            x: nodePos.x,
            y: nodePos.y
        });
    }
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

applyLayout 函数是自定义算法，返回每个节点的计算坐标。

动态参数调整

提供滑块控制布局参数：

<input type="range" value={leafLineLength} min={50} step={5} max={400} onChange={(e) => { setLeafLineLength(Number(e.target.value)); }} />
<input type="range" value={leafNodeGap} min={5} step={5" max={200} onChange={(e) => { setLeafNodeGap(Number(e.target.value)); }} />

调整参数后自动重新计算布局。

响应式布局更新

使用 useEffect 监听参数变化并更新布局：

useEffect(() => {
    applyMyLayout();
}, [leafLineLength, leafNodeGap]);

当参数改变时，自动应用新的布局计算。

数据生成函数

从结构化数据生成图数据：

const orignData = {
    entname: 'Xiaoxiao Tech Co., Ltd.',
    invs: [/* 股东列表 */],
    persons: [/* 人员列表 */],
    asInvs: [/* 投资列表 */],
    branchs: [/* 分支机构列表 */]
};

const myJsonData = generateGraphData(orignData.entname, {
    investors: orignData.invs,
    persons: orignData.persons,
    investments: orignData.asInvs,
    branches: orignData.branchs
});

将业务数据转换为图节点和线条。

第三方布局库集成

示例代码说明可以集成第三方布局库：

// 可以在 applyLayout 函数中使用第三方库：
import { layout as dagreLayout } from 'dagre';

const applyLayout = (nodes, edges) => {
    const g = new dagre.graphlib.Graph();
    g.setGraph({ rankdir: 'LR' });
    nodes.forEach(node => g.setNode(node.id, node));
    edges.forEach(edge => g.setEdge(edge.from, edge.to));
    dagreLayout(g);
    return g.nodes().map(nodeId => ({
        nodeId,
        x: g.node(nodeId).x,
        y: g.node(nodeId).y
    }));
};

这展示了如何将 relation-graph 与其他布局算法（如 Dagre、ELK、Graphviz）集成。

创意使用场景

企业股权结构图

可视化公司的股权结构，显示股东、子公司、分支机构和关键人员之间的关系。参数可以调整不同分支的间距和连线长度。

知识图谱布局

使用专业的图布局算法（如 ForceAtlas2、Fruchterman-Reingold）来布局大型知识图谱，优化节点分布以减少重叠和交叉。

社交网络分析

集成社交网络分析工具（如 NetworkX、Gephi）的布局算法，可视化社交网络中的社区结构和影响力传播。

电路图和原理图

使用专门为电路设计的布局算法，自动排列电子元件和连接线路，创建清晰的电路原理图。

软件架构图

可视化软件系统的架构，包括模块、服务和依赖关系。使用分层或辐射状布局算法展示系统结构。

生物网络可视化

展示蛋白质相互作用、代谢通路或神经网络等生物网络。使用生物信息学领域的专业布局算法。

地理空间布局

根据节点的地理坐标进行布局，创建带有空间背景的网络图。例如，显示城市之间的交通网络。

时间线布局

按照时间顺序排列节点，创建时间线或甘特图风格的可视化，适合项目管理和历史事件展示。

径向布局

实现围绕中心节点的径向布局，适合展示以某个核心概念为中心的知识领域或社交圈子。

圆形布局

将节点排列成圆形或椭圆形，适合展示周期性数据或需要所有节点平等对待的场景。

网格布局

将节点排列成规则的网格，适合展示具有行列结构的数据，如表格、矩阵或二维数组。

企业图谱

自定义布局算法实现