Force-Directed Layout with Invisible Root Connections

Functional Overview

This example demonstrates a force-directed graph layout with an invisible root node connected to all other nodes via hidden lines. The force layout algorithm naturally positions nodes based on their connections, with the root node (node ‘a’) acting as a gravitational anchor through invisible links (opacity: 0). Only specific relationships between non-root nodes are visually displayed, creating a clean visualization where the underlying structure maintains graph connectivity without visual clutter.

Implementation of Key Features

Force Layout with Hidden Root Anchoring

The graph uses force-directed layout with an invisible central 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: 'e1', text: 'e1' },
            { id: 'e2', text: 'e2' }
        ],
        lines: [
            // Visible relationships
            { id: 'l1', from: 'b', to: 'b1' },
            { id: 'l2', from: 'b', to: 'b2' },
            { id: 'l3', from: 'd', to: 'd1' },
            { id: 'l4', from: 'd', to: 'd2' },
            { id: 'l5', from: 'e', to: 'e2' }
        ]
    };

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

    // Add invisible anchor lines from root to all nodes
    myJsonData.nodes.forEach(n => {
        if (n.id !== rootId) {
            myJsonData.lines.push({
                id: `l-hidden-${n.id}`,
                from: rootId,
                to: n.id,
                opacity: 0  // Invisible but affects force layout
            });
        }
    });

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

Key aspects:

Root as gravitational center: Node ‘a’ pulls all other nodes toward center
Invisible structural links: Hidden lines maintain graph connectivity for layout algorithm
Visible subset: Only selected relationships displayed to users
Force-directed positioning: Nodes self-organize based on attraction/repulsion forces

Force Layout Configuration

Configures force-directed layout with custom repulsion:

const graphOptions: RGOptions = {
    debug: false,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeWidth: 60,
    defaultNodeHeight: 60,
    defaultLineWidth: 2,
    defaultLineColor: '#333333',
    layout: {
        layoutName: 'force',
        force_node_repulsion: 0.5  // Controls how much nodes push apart
    }
};

The force_node_repulsion parameter (0.5) creates moderate spacing between nodes, preventing overlap while keeping the graph compact.

Circle Node Shape

All nodes rendered as circles with consistent sizing:

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

Event Handlers

Standard click handlers for interaction:

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

Knowledge Graph Exploration: Display concepts with a hidden domain anchor. Show only semantic relationships between concepts while the invisible root maintains overall graph cohesion.

Social Community Detection: Visualize social networks where a hidden “community” node connects all members. Only show actual friendships while the community node influences group clustering.

Protein Interaction Networks: Display proteins with a hidden cellular process anchor. Show only experimentally verified interactions while invisible links to the process guide the layout.

Project Dependency Graph: Visualize modules with a hidden project root. Display only direct dependencies while invisible connections to root ensure all modules stay relatively centered.

Recommendation System Visualization: Show items with invisible user preference anchors. Display item similarity relationships while hidden connections to user clusters organize the layout.

Isolated Nodes 2

Force-Directed Layout with Invisible Root - Hidden anchor node organizes force-directed graph structure