Relation Graph

功能概述

此示例展示了文件夹布局算法，它专门用于展示类似文件系统的层级结构。布局将父节点和子节点以类似文件夹树的形式排列，连接线从父节点的指定位置出发连接到子节点。支持动态调整连接点的偏移量，实现精确的线条位置控制。

核心特性实现

文件夹布局配置

使用 folder 布局类型：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'folder',
        from: 'left',
        treeNodeGapH: 20,
        treeNodeGapV: 10
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultPolyLineRadius: 4,
    defaultExpandHolderPosition: 'right',
    reLayoutWhenExpandedOrCollapsed: true
};

文件夹布局从左到右展开，使用正交线条连接节点。

连接点偏移控制

动态调整线条起点相对于连接点的偏移量：

const [fromOffsetX, setFromOffsetX] = useState(40);

myJsonData.lines.forEach((line, index) => {
    line.fromJunctionPoint = RGJunctionPoint.bottom;
    line.fromJunctionPointOffsetX = fromOffsetX;
    line.toJunctionPoint = RGJunctionPoint.left;
});

fromJunctionPointOffsetX 控制线条在水平方向上的偏移。

响应式偏移更新

使用 useEffect 监听偏移量变化并更新线条：

const updateMyData = () => {
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            fromJunctionPointOffsetX: fromOffsetX
        });
    });
};

useEffect(() => {
    updateMyData();
}, [fromOffsetX]);

滑块调整偏移量时，所有线条会实时更新。

自定义节点渲染

根据节点是否有子节点显示不同的图标：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        return (
            <div className={`w-full h-full flex place-items-center gap-2 p-2 ${node.rgChildrenSize > 0 ? 'bg-gray-100 rounded' : ''}`}>
                {
                    node.rgChildrenSize > 0
                        ? <FolderOpen className="w-4 h-4 text-blue-700" />
                        : <div className="w-4 h-4 "></div>
                }
                <div>{node.text}</div>
            </div>
        );
    }}
</RGSlotOnNode>

文件夹节点显示文件夹图标，文件节点显示空白占位符。

层级数据结构

使用模拟的文件系统数据：

const myJsonData: RGJsonData = await mockDataApi();
myJsonData.lines.forEach((line, index) => {
    if (!line.id) {
        line.id = `l${index + 1}`;
    }
});

数据包含文件夹和文件的层级关系。

偏移量滑块

提供直观的偏移量控制：

<input
    type="range"
    value={fromOffsetX}
    min={-100}
    step={5}
    max={200"
    onChange={(e) => { setFromOffsetX(Number(e.target.value)); }}
/>

范围从 -100 到 200，步长为 5，提供精细的控制。

正交线条样式

使用带圆角的正交线条：

defaultLineShape: RGLineShape.StandardOrthogonal,
defaultPolyLineRadius: 4

线条以直角连接，拐角处有 4px 的圆角，更加美观。

创意使用场景

文件浏览器

创建可视化文件浏览器，展示目录结构的层次关系。比传统树形视图更直观。

代码依赖分析

展示软件项目的模块依赖关系，类似文件夹的结构显示代码组织。

组织架构树

展示公司或组织的部门层级，从总部到分支机构的结构。

分类目录

电商网站的分类系统，从大类到小类到具体商品的层级展示。

知识库组织

展示知识库的文档组织结构，帮助用户理解内容分类。

设施层级管理

展示建筑物、楼层、房间的层级关系，用于设施管理。

产品配置器

展示产品的可选配置和选项的层级关系，帮助用户理解配置选项。

菜单导航设计

设计应用程序或网站的菜单结构，可视化导航层级。

任务分解

项目管理中展示任务的层级分解，从主任务到子任务。

决策树可视化

展示决策树的分支结构，每个节点代表一个决策点。

分类学层级

生物学分类学中展示物种的层级关系，从界到种。

数据库模式

展示数据库表和关系的层级结构，帮助理解数据模型。

folder-文件夹布局

文件系统样式层级布局