Relation Graph

Functional Overview

This example demonstrates how to implement completely custom layout algorithms. By setting the layout to fixed mode, you can use your own algorithm to calculate and set the x, y coordinate positions for each node. This demo shows a custom layout for an enterprise relationship graph, including shareholders, personnel, investments, and branches. Users can adjust layout parameters via sliders and view layout effects in real-time.

Implementation of Key Features

Fixed Layout Mode

Use fixed layout type to manually control node positions:

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

In fixed mode, the layout engine doesn’t automatically calculate node positions, instead using manually set coordinates.

Custom Layout Function

Create a custom layout algorithm to calculate node positions:

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();
};

The applyLayout function is a custom algorithm returning calculated coordinates for each node.

Dynamic Parameter Adjustment

Provide sliders to control layout parameters:

<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)); }} />

Adjusting parameters automatically recalculates the layout.

Responsive Layout Update

Use useEffect to listen for parameter changes and update layout:

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

When parameters change, automatically apply new layout calculations.

Data Generation Function

Generate graph data from structured data:

const orignData = {
    entname: 'Xiaoxiao Tech Co., Ltd.',
    invs: [/* shareholder list */],
    persons: [/* personnel list */],
    asInvs: [/* investment list */],
    branchs: [/* branch list */]
};

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

Convert business data to graph nodes and lines.

Third-Party Layout Library Integration

Example code shows integration with third-party layout libraries:

// Can use third-party libraries in applyLayout function:
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
    }));
};

This demonstrates how to integrate relation-graph with other layout algorithms (like Dagre, ELK, Graphviz).

Creative Use Cases

Enterprise Equity Structure Graph

Visualize company equity structures, displaying relationships between shareholders, subsidiaries, branches, and key personnel. Parameters can adjust spacing and line length for different branches.

Knowledge Graph Layout

Use professional graph layout algorithms (like ForceAtlas2, Fruchterman-Reingold) to layout large knowledge graphs, optimizing node distribution to reduce overlaps and crossings.

Social Network Analysis

Integrate social network analysis tools (like NetworkX, Gephi) layout algorithms to visualize social networks, identifying community structures and influence propagation.

Circuit Diagrams and Schematics

Use layout algorithms specifically designed for circuits to automatically arrange electronic components and connection lines, creating clear circuit schematics.

Software Architecture Diagrams

Visualize software system architectures including modules, services, and dependencies. Use layered or radial layout algorithms to display system structure.

Biological Network Visualization

Display protein interactions, metabolic pathways, or neural networks in biology. Use professional layout algorithms from bioinformatics.

Geospatial Layout

Layout nodes based on their geographic coordinates, creating network graphs with spatial backgrounds. For example, showing transportation networks between cities.

Timeline Layout

Arrange nodes in chronological order, creating timeline or Gantt chart-style visualizations suitable for project management and historical event displays.

Radial Layout

Implement radial layout around a central node, suitable for displaying knowledge domains or social circles centered on a core concept.

Circular Layout

Arrange nodes in circles or ellipses, suitable for displaying periodic data or scenarios where all nodes need equal treatment.

Grid Layout

Arrange nodes in regular grids, suitable for displaying data with row-column structures like tables, matrices, or 2D arrays.

Scene Company

Custom Layout Algorithm Implementation