Circle Layout with Invisible Root Connections

Functional Overview

This example demonstrates a technique for displaying nodes in a circle layout while maintaining an invisible root node connected to all other nodes. The root node (node ‘a’) serves as a hidden anchor point, with invisible lines (opacity: 0) connecting it to every other node. A few visible lines connect specific nodes to show actual relationships. This pattern is useful when you need a central reference point without visual clutter.

Implementation of Key Features

Invisible Root Node with Hidden Connections

The graph creates a root node with connections to all other nodes, but these connections are invisible:

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        nodes: [
            { id: 'a', text: 'a' },
            { id: 'b', text: 'b' },
            { id: 'b1', text: 'b1' },
            { id: 'b2', text: 'b2' },
            { id: 'b3', text: 'b3' },
            { id: 'b4', text: 'b4' },
            { id: 'b5', text: 'b5' },
            { id: 'b6', text: 'b6' },
            { id: 'c', text: 'c' },
            { id: 'c1', text: 'c1' },
            { id: 'c2', text: 'c2' },
            { id: 'c3', text: 'c3' },
            { id: 'd', text: 'd' },
            { id: 'd1', text: 'd1' },
            { id: 'd2', text: 'd2' },
            { id: 'd3', text: 'd3' },
            { id: 'd4', text: 'd4' },
            { id: 'e', text: 'e' },
            { id: 'e2', text: 'e2' }
        ],
        lines: [
            // Visible relationships between specific nodes
            { id: 'l1', from: 'b', to: 'b1' },
            { id: 'l2', from: 'c2', to: 'b5' },
            { id: 'l3', from: 'd3', to: 'b3' },
            { id: 'l4', from: 'd', to: 'd1' },
            { id: 'l5', from: 'e', to: 'e2' }
        ]
    };

    const rootId = myJsonData.nodes[0].id;
    myJsonData.rootId = rootId;

    // Add invisible lines from root to all other nodes
    let lineIndex = myJsonData.lines.length + 1;
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l${lineIndex++}`,
                from: rootId,
                to: n.id,
                opacity: 0  // Makes the line invisible
            });
        }
    });

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

Key aspects:

Root as anchor: Node ‘a’ serves as the central root
Invisible connections: Lines from root have opacity: 0
Visible relationships: Specific lines between non-root nodes remain visible
Unique IDs: Every line gets a unique ID for proper identification

Circle Layout Configuration

Uses circle layout to arrange nodes in a circular pattern:

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    layout: {
        layoutName: 'circle'
    }
};

Event Handlers

Basic click handlers for nodes and lines:

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    console.log('onNodeClick:', nodeObject);
};

const onLineClick = (lineObject: RGLine, linkObject: RGLink, $event: RGUserEvent) => {
    console.log('onLineClick:', lineObject);
};

Creative Use Cases

Social Network Analysis: Display users in a circle layout with the platform as an invisible central node. Show visible friendships between users while maintaining hidden connections to the platform for data management.

Mind Mapping Tool: Create a central concept node that’s hidden, with related topics arranged circularly. Only show meaningful associations between topics while keeping the central concept as a structural anchor.

Network Topology Visualization: Visualize network devices around a central switch or router. Hide the central infrastructure but show direct connections between endpoints that communicate with each other.

Orbital Systems Display: Show planets or satellites orbiting a central body. Display the central body as an invisible reference point while showing gravitational interactions or communication links between orbiting objects.

Skill Graph Visualization: Display skills in a circle around a hidden profession or domain. Show relationships between related skills while maintaining the domain as an organizational backbone without visual prominence.

Isolated Nodes