Relation Graph

Functional Overview

This example demonstrates the center layout algorithm, which places the root node at the center of the canvas and distributes other nodes evenly around it, forming a radial layout structure. This layout is particularly suitable for displaying relationship networks centered around a single core node, such as a person and their relationships in social networks.

Implementation of Key Features

Center Layout Configuration

Use center layout type:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'center'
    }
};

Center layout automatically places the root node in the center with other nodes arranged around it.

Dynamic Shape Switching

Support real-time switching of node and line shapes:

const [nodeShape, setNodeShape] = React.useState<number>(RGNodeShape.circle);
const [lineShape, setLineShape] = React.useState<number>(RGLineShape.StandardStraight);

<SimpleUISelect
    data={[
        { value: RGNodeShape.rect, text: 'Rect' },
        { value: RGNodeShape.circle, text: 'Circle' }
    ]}
    currentValue={nodeShape}
    onChange={(newValue: number) => { setNodeShape(newValue); }}
/>

Users can switch between circular and rectangular nodes.

Adjust Node Size Based on Shape

Automatically adjust node size based on node shape:

graphInstance.getNodes().forEach((node) => {
    if (nodeShape === RGNodeShape.circle) {
        graphInstance.updateNode(node, {
            nodeShape,
            width: 70,
            height: 70
        });
    } else {
        graphInstance.updateNode(node, {
            nodeShape,
            width: 0,  // 0 means auto-calculate
            height: 0
        });
    }
});

Circles use fixed size, rectangles use auto size calculation.

Dynamic Junction Point Adjustment

Adjust connection points based on line shape:

graphInstance.getLines().forEach((line) => {
    if (lineShape === RGLineShape.StandardStraight) {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: RGJunctionPoint.border,
            toJunctionPoint: RGJunctionPoint.border,
            useTextOnPath: textOnPath
        });
    } else {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: RGJunctionPoint.ltrb,
            toJunctionPoint: RGJunctionPoint.ltrb,
            useTextOnPath: textOnPath
        });
    }
});

Straight lines use border connections, polylines and curves use four-direction connections.

Line Text Path Control

Control whether line text displays along the path:

<SimpleUISelect
    data={[
        { value: false, text: 'Normal' },
        { value: true, text: 'Text On Path' }
    ]}
    onChange={(newValue: boolean) => setTextOnPath(newValue)}
    currentValue={textOnPath}
/>

When enabled, text aligns along the line’s curved path.

Responsive Updates

Use useEffect to listen for shape changes and automatically update:

useEffect(() => {
    updateMyGraphData();
}, [nodeShape, lineShape, textOnPath]);

Any shape or text option change triggers graph update.

Creative Use Cases

Social Network Visualization

Display personal relationships in social networks, with the central person in the middle and friends, colleagues distributed around. Clearly see social circles.

Centralized Organization Charts

Display organization structures centered on CEO or core leadership, showing direct subordinates and indirect reporting relationships. Suitable for flat organization structures.

Knowledge Graph Center Nodes

Display related knowledge domains and concepts centered on a core concept. Suitable for educational tools or knowledge management systems.

Product Ecosystems

Display related plugins, extensions, accessories, and services centered on a core product. Suitable for product marketing and presentation.

Influence Analysis

Display influence scope centered on key figures or organizations. Can be used for political, business, or academic influence analysis.

Network Topology Centers

Display network device connections centered on core servers or routers. Suitable for IT infrastructure management.

Concept Mind Maps

Display related sub-topics and detailed ideas centered on a central theme. Suitable for brainstorming and creative tools.

Emotional Relationship Mapping

Display family members, friends, colleagues, and other relationship types centered on an individual. Suitable for psychology or social work.

Service Dependency Graphs

Display downstream and upstream services centered on a core service. Suitable for microservice architecture visualization.

Geographic Center Radial

Display surrounding towns, transportation routes, and regions centered on a city. Suitable for urban planning or transportation analysis.

Center Layout (center)

Radial Center Layout for Hub-and-Spoke Networks