Relation Graph

功能概述

此示例演示了 relation-graph 的核心实例 API 使用方法。通过 RGHooks.useGraphInstance() 获取图实例后，可以调用各种方法来控制图的行为，包括加载数据、节点展开/折叠、移动视图、缩放等。这是使用 relation-graph 进行高级操作的基础。

核心特性实现

使用 Hooks 获取图实例

3.x 版本推荐使用 Hooks API 获取图实例：

const graphInstance = RGHooks.useGraphInstance();

这比传统的 ref 方式更符合 React 最佳实践，可以直接在组件中使用实例方法。

数据加载和初始化

使用 setJsonData 方法加载图数据：

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* 节点数组 */],
    lines: [/* 线条数组 */].map((line, index) => ({ ...line, id: `line-${index}` }))
};

await graphInstance.setJsonData(myJsonData);
graphInstance.moveToCenter();
graphInstance.zoomToFit();

注意：线条必须有 id 属性，可以通过 map 为每条线生成唯一 ID。

节点展开/折叠 API

通过实例方法控制节点的展开和折叠状态：

const callApi = () => {
    const targetNodeId = 'b';
    const targetNode = graphInstance.getNodeById(targetNodeId);
    if (targetNode) {
        if (targetNode.expanded === true) {
            graphInstance.collapseNode(targetNode);
        } else {
            graphInstance.expandNode(targetNode);
        }
    }
};

getNodeById 可以获取特定节点的引用，expandNode 和 collapseNode 控制其状态。

视图控制 API

控制图的可视区域和缩放级别：

graphInstance.moveToCenter();  // 将图移动到视图中心
graphInstance.zoomToFit();     // 缩放以适应视图

这些方法确保用户可以看到完整的图内容。

事件处理

处理节点和线条的点击事件：

const onNodeClick = (nodeItem: any, e: RGUserEvent) => {
    console.log('onNodeClick:', nodeItem.text);
};

<RelationGraph
    options={graphOptions}
    onNodeClick={onNodeClick}
/>

事件处理器接收节点对象和用户事件对象，可以用于实现交互功能。

配置选项

定义图的布局和行为选项：

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 120,
        treeNodeGapV: 10
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 100,
    defaultNodeHeight: 30,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    reLayoutWhenExpandedOrCollapsed: true,
    defaultExpandHolderPosition: 'right'
};

这些选项控制图的默认行为和外观。

创意使用场景

动态数据加载

从后端 API 获取数据后动态更新图：

const fetchData = async () => {
    const response = await fetch('/api/graph-data');
    const data = await response.json();
    await graphInstance.setJsonData(data);
    graphInstance.moveToCenter();
};

搜索和导航

实现搜索功能，定位并高亮特定节点：

const searchNode = (nodeId: string) => {
    const node = graphInstance.getNodeById(nodeId);
    if (node) {
        graphInstance.focusOnNode(node);
        graphInstance.setSelectedNodes([node]);
    }
};

批量操作

对多个节点执行批量操作：

const expandAllNodes = () => {
    const nodes = graphInstance.getNodes();
    nodes.forEach(node => {
        if (!node.expanded) {
            graphInstance.expandNode(node);
        }
    });
};

导出功能

将图的当前状态导出为数据或图像：

const exportGraph = async () => {
    const data = graphInstance.getJsonData();
    const blob = await graphInstance.getDataImage();
    // 导出数据或图像
};

动画和过渡

创建自定义动画效果：

const animateToNode = async (nodeId: string) => {
    const node = graphInstance.getNodeById(nodeId);
    if (node) {
        await graphInstance.animateToCenter(node);
        await graphInstance.animateZoom(1.5);
    }
};

状态保存和恢复

保存和恢复图的状态：

const saveState = () => {
    const state = {
        data: graphInstance.getJsonData(),
        view: graphInstance.getViewPosition(),
        zoom: graphInstance.getZoom()
    };
    localStorage.setItem('graphState', JSON.stringify(state));
};

GraphInstance API

图实例 API 参考指南