Tree Data Structure - Visualize hierarchical data as expandable trees

Hierarchical Tree Data Structure

Functional Overview

This example demonstrates visualization of hierarchical data structures as trees. Each level of the hierarchy is clearly separated, with parent-child relationships shown through connecting lines. Supports expanding/collapsing branches to focus on specific parts of the tree.

Implementation of Key Features

Recursive Tree Building

const buildTreeFromData = (data: TreeNode, parentId?: string): RGJsonData => {
    const nodes: JsonNode[] = [{
        id: data.id,
        text: data.label,
        data: { level: data.level, expanded: true }
    }];

    const lines: JsonLine[] = [];
    if (parentId) {
        lines.push({ from: parentId, to: data.id });
    }

    if (data.children) {
        data.children.forEach(child => {
            const childGraph = buildTreeFromData(child, data.id);
            nodes.push(...childGraph.nodes);
            lines.push(...childGraph.lines);
        });
    }

    return { nodes, lines };
};

Level-Based Styling

const applyLevelStyles = (node: RGNode) => {
    const level = node.data.level;
    const colors = ['#1a237e', '#0d47a1', '#01579b', '#0277bd'];

    return {
        color: colors[level % colors.length],
        fontSize: Math.max(12, 20 - level * 2)
    };
};

Expand/Collapse Handlers

const onNodeExpand = (node: RGNode) => {
    const children = graphInstance.getNodes().filter(n =>
        graphInstance.getLineById(`${node.id}-${n.id}`)
    );
    children.forEach(child => {
        graphInstance.updateNode(child, { hidden: false });
    });
};

const onNodeCollapse = (node: RGNode) => {
    const descendants = getAllDescendants(node);
    descendants.forEach(desc => {
        graphInstance.updateNode(desc, { hidden: true });
    });
};

Creative Use Cases

Organization Charts: Corporate hierarchies and reporting structures.

File Systems: Directory and file hierarchies.

Taxonomy: Biological classification or product categories.

Decision Trees: Complex decision structures.

Skill Trees: Learning progressions and prerequisites.