Relayout After Adding Nodes

Demonstrates automatic layout recalculation after dynamically adding new nodes to the graph.

Relayout After Adding Nodes

Functional Overview

This example demonstrates how to trigger a layout recalculation after dynamically adding new nodes to the graph. The graph automatically repositions all nodes to accommodate the new additions.

Implementation of Key Features

Dynamic Node Addition

// Add new nodes dynamically
graphInstance.addNodes([
    { id: 'new-node-1', text: 'New Node 1' },
    { id: 'new-node-2', text: 'New Node 2' }
]);

// Trigger relayout
graphInstance.doLayout();

Automatic Layout Refresh

After adding nodes, the layout automatically recalculates to accommodate all nodes.

Creative Use Cases

Dynamic Org Charts: Add new employees and automatically reorganize the chart. Maintains proper hierarchy.

Growing Knowledge Graphs: Add new concepts and automatically reposition. Keeps graph readable.

Workflow Designers: Add new process steps and auto-layout. Maintains process flow clarity.

Network Discovery: Dynamically add discovered devices. Auto-layout accommodates new topology.

Mind Mapping: Add new ideas and auto-arrange. Keeps mind map organized.

Project Planning: Add new tasks and reorganize. Maintains project structure.

Social Networks: Add new users and reposition. Keeps network visualization clean.

Data Modeling: Add new entities and relationships. Auto-layout maintains diagram clarity.