Relation Graph

Functional Overview

This example demonstrates the core instance API usage of relation-graph. After obtaining the graph instance via RGHooks.useGraphInstance(), you can call various methods to control graph behavior, including loading data, expanding/collapsing nodes, moving the view, zooming, and more. This is the foundation for using relation-graph for advanced operations.

Implementation of Key Features

Getting Graph Instance with Hooks

Version 3.x recommends using the Hooks API to obtain the graph instance:

const graphInstance = RGHooks.useGraphInstance();

This is more aligned with React best practices than the traditional ref approach and allows direct use of instance methods within components.

Data Loading and Initialization

Use the setJsonData method to load graph data:

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* array of nodes */],
    lines: [/* array of lines */].map((line, index) => ({ ...line, id: `line-${index}` }))
};

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

Note: Lines must have an id property, which can be generated for each line using map.

Node Expand/Collapse API

Control node expand/collapse state through instance methods:

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

getNodeById can get a reference to a specific node, while expandNode and collapseNode control its state.

View Control API

Control the graph’s visible area and zoom level:

graphInstance.moveToCenter();  // Move graph to view center
graphInstance.zoomToFit();     // Zoom to fit view

These methods ensure users can see the complete graph content.

Event Handling

Handle click events on nodes and lines:

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

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

Event handlers receive the node object and user event object, useful for implementing interactive features.

Configuration Options

Define layout and behavior options for the graph:

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'
};

These options control the default behavior and appearance of the graph.

Creative Use Cases

Dynamic Data Loading

Dynamically update the graph after fetching data from a backend API:

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

Search and Navigation

Implement search functionality to locate and highlight specific nodes:

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

Batch Operations

Perform batch operations on multiple nodes:

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

Export Functionality

Export the current state of the graph as data or an image:

const exportGraph = async () => {
    const data = graphInstance.getJsonData();
    const blob = await graphInstance.getDataImage();
    // Export data or image
};

Animation and Transitions

Create custom animation effects:

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

State Saving and Restoration

Save and restore graph state:

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

GraphInstance API

Graph Instance API Reference Guide