Relation Graph

功能概述

此示例展示了文件夹布局的增强版本，支持通过 setJsonData 方法传递层级数据结构。图会自动识别节点之间的层级关系（通过 children 属性）并将其扁平化显示。提供了三个可调参数：线条起始位置偏移量、水平间距和垂直间距，用户可以实时调整这些参数以获得最佳的视觉效果。

核心特性实现

层级数据自动识别

使用 children 属性定义节点层级：

const myJsonData: RGJsonData = {
    rootId: 'root',
    nodes: [
        {
            id: 'root',
            text: 'Root Folder',
            children: [
                {
                    id: 'child1',
                    text: 'Child 1',
                    children: [/* 更多子节点 */]
                }
            ]
        }
    ]
};

relation-graph 会自动识别 children 属性并展开为扁平的节点数组。

动态布局参数

支持实时调整水平间距和垂直间距：

const updateMyOptions = async () => {
    graphInstance.updateOptions({
        layout: {
            layoutName: 'folder',
            from: 'left',
            treeNodeGapH: rangeHorizontal,
            treeNodeGapV: rangeVertical
        }
    });
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

useEffect(() => {
    updateMyOptions();
}, [rangeHorizontal, rangeVertical]);

滑块调整间距时自动重新布局。

连接点偏移控制

动态调整线条起始点的偏移量：

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

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

偏移量基于指定的连接点位置（RGJunctionPoint）进行相对偏移。

初始化连接点配置

在数据加载前设置连接点和偏移：

myJsonData.lines.forEach((line, index) => {
    if (!line.id) {
        line.id = `l${index + 1}`;
    }
    line.fromJunctionPoint = RGJunctionPoint.bottom;
    line.fromJunctionPointOffsetX = fromOffsetX;
    line.toJunctionPoint = RGJunctionPoint.left;
});

在数据添加到图之前，可以直接修改线条属性。

响应式参数滑块

提供三个滑块控制不同参数：

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

<input type="range" min="-150" max="200" value={rangeHorizontal} onChange={(e) => { setRangeHorizontal(parseFloat(e.target.value)); }} />

<input type="range" min="5" max="100" value={rangeVertical} onChange={(e) => { setRangeVertical(parseFloat(e.target.value)); }} />

每个滑块控制不同的布局参数，提供实时反馈。

自定义节点卡片

使用插槽渲染丰富的节点内容：

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="my-card-node">
            <div className="card-left" />
            <div className="card-right">
                <div className="card-name">{node.text}</div>
                <div className="card-tags">
                    {node.data?.tags.map((tag: string) => (
                        <div key={tag} className="card-tag">{tag}</div>
                    ))}
                </div>
                <div className="card-location">{node.data?.location}</div>
            </div>
        </div>
    )}
</RGSlotOnNode>

节点显示标签、位置等丰富信息。

负间距支持

水平间距支持负值：

<input type="range" min="-150" max="200" value={rangeHorizontal} />

负间距可以使子节点与父节点在垂直方向上有重叠，创建更紧凑的布局。

颜色主题配置

设置节点和线条的颜色：

const graphOptions: RGOptions = {
    defaultLineColor: '#447fff',
    defaultNodeColor: '#333333'
};

统一的颜色主题提供一致的视觉体验。

创意使用场景

文件浏览器增强

创建功能丰富的文件浏览器，支持标签、位置等元数据显示。比传统文件管理器更直观。

知识库导航

构建带有标签、分类、位置信息的知识库导航系统。帮助用户快速找到相关内容。

组织架构展示

展示公司或组织的部门结构，每个部门显示标签、地点、负责人等信息。

产品目录浏览

电商网站的产品分类目录，每个类别显示标签、库存位置等信息。

项目任务管理

项目管理系统中的任务层级结构，任务显示标签、负责人、截止日期等。

地点层级展示

地理信息系统中的地点层级，如国家-省-市-区，显示地点标签和坐标。

课程体系导航

在线教育平台的课程结构，每门课程显示难度标签、课时、讲师等信息。

设备资产清单

企业的设备资产树，每个设备显示型号标签、放置位置、状态等信息。

文档管理系统

企业文档管理系统，文档显示分类标签、作者、修改日期等元数据。

客户关系管理

CRM 系统中的客户层级结构，客户显示行业标签、地区、联系人等信息。

供应链可视化

供应链的层级结构，每个节点显示供应商标签、地理位置、产能等信息。

产品配置器

复杂产品的配置选项树，每个选项显示兼容性标签、价格、库存等信息。

法律法规库

法律法规的分类体系，每条法规显示效力标签、发布日期、适用地区等。

医疗诊断指南

医疗诊断的决策树，每个节点显示症状标签、检查项目、治疗方案等。

烹饪食谱导航

烹饪网站的食谱分类，每个食谱显示菜系标签、难度、食材等信息。

folder-组织机构树

增强型文件夹布局与层级数据