Gradual Node Expansion

Demonstrates how to progressively reveal nodes in a tree structure, showing them one level at a time.

Gradual Node Expansion

Functional Overview

This example demonstrates how to progressively reveal nodes in a tree structure, showing them one level or branch at a time for better data comprehension.

Implementation of Key Features

Progressive Expansion Logic

Implement step-by-step node revelation:

const expandGradually = async (rootNode: RGNode, delay: number = 500) => {
    const children = rootNode.lot.childs;
    for (const child of children) {
        await graphInstance.sleep(delay);
        graphInstance.expandNode(child);
    }
};

Delayed Child Display

Show children with timing intervals:

const onNodeClick = async (node: RGNode) => {
    if (node.lot.childs.length > 0) {
        await expandGradually(node, 300);
    }
};

Creative Use Cases

• Tutorials: Guide users through complex hierarchies
• Data Walkthroughs: Present information in digestible chunks
• Storytelling: Reveal plot points progressively
• Training Materials: Step-by-step concept introduction
• Product Tours: Feature discovery at user’s pace