Circle Layout with Green Invisible Root Connections

Functional Overview

This example demonstrates a circle layout variant with an invisible root node that connects to all other nodes through hidden green lines. Similar to the other “show-single-nodes” examples, it uses opacity: 0 for root connections while displaying select visible relationships between specific nodes. The unique aspect here is the green color theme for visible elements, demonstrating how color customization can differentiate relationship types or graph themes.

Implementation of Key Features

Circle Layout with Invisible Root Anchor

The graph arranges nodes in a circle with a hidden central root node:

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: '',
        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: [
            { 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 nodes
    let lineCounter = myJsonData.lines.length + 1;
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l${lineCounter++}`,
                from: rootId,
                to: n.id,
                opacity: 0
            });
        }
    });

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

Key aspects:

Sequential line ID generation: Uses lineCounter to generate unique IDs (l6, l7, etc.)
Invisible root connections: Lines with opacity: 0 hide structural connections
Visible subset: Only 5 visible relationships between specific nodes
Circle arrangement: Nodes positioned circularly around the hidden root

Green-Themed Configuration

The graph uses green as the primary color for lines:

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    defaultLineColor: 'green',  // Green color theme
    layout: {
        layoutName: 'circle'
    }
};

Circle Layout with Consistent Node Sizing

All nodes rendered as 60x60px circles:

defaultNodeShape: RGNodeShape.circle,
defaultNodeWidth: 60,
defaultNodeHeight: 60,

Event Handlers

Standard interaction handlers:

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

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

Custom Styling

Uses custom SCSS for additional styling:

import './my-relation-graph.scss';

Creative Use Cases

Environmental Network Visualization: Display ecological relationships with green theme. Show visible food web connections while invisible root connections to ecosystem maintain structure.

Financial Growth Tracking: Visualize investment portfolios with green indicating growth. Display only profitable investment connections while hidden anchors organize the layout.

Sustainability Metrics Dashboard: Show sustainability indicators around a central goal. Use green to highlight positive metrics while invisible connections to the goal organize the display.

Health Ecosystem Mapping: Display health factors with green representing positive indicators. Show correlations between healthy behaviors while invisible connections to overall wellness structure the graph.

Green IT Infrastructure Map: Visualize energy-efficient data center components. Use green for power-efficient connections while invisible structural links organize the topology.

Isolated Nodes 3

Circle Layout with Green Theme - Invisible root anchors circular node arrangement with green styling