Zoom Level Control with Large Tree Dataset

Functional Overview

This example demonstrates programmatic zoom control on a large tree-structured graph containing 100+ nodes. Users can select from preset zoom levels (10%, 20%, 40%, 80%, 100%) via a dropdown, with the graph immediately adjusting to show different levels of detail. The example showcases how to use setZoom() API to control magnification, useful for navigating large hierarchical datasets.

Implementation of Key Features

Zoom State Management

const [zoom, setZoom] = useState(100);

Graph Initialization with Zoom

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: 'a',
        nodes: [
            // 100+ nodes in tree structure
        ],
        lines: [
            // Tree connections
        ]
    };

    await graphInstance.setJsonData(myJsonData);
    graphInstance.moveToCenter();
    graphInstance.setZoom(zoom);
    SimpleGlobalMessage.showMessage({
        type: 'success',
        message: `Set Zoom To: ${zoom}%`
    });
};

Zoom Update Effect

useEffect(() => {
    setGraphZoom();
}, [zoom]);

const setGraphZoom = () => {
    graphInstance.setZoom(zoom);
};

Zoom Control UI

<SimpleUISelect
    data={[
        { value: 100, text: '100%' },
        { value: 80, text: '80%' },
        { value: 40, text: '40%' },
        { value: 20, text: '20%' },
        { value: 10, text: '10%' }
    ]}
    currentValue={zoom}
    onChange={(newValue: string) => {
        setZoom(parseInt(newValue));
    }}
/>

Vertical Tree Layout

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'tree',
        from: 'top',
        treeNodeGapH: 10,
        treeNodeGapV: 100
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 30,
    defaultNodeHeight: 100
};

Creative Use Cases

Large Organization Charts: Navigate corporate hierarchies with thousands of employees. Zoom out for overview, zoom in for department details.

Genealogy Trees: Browse extensive family trees. Use zoom to switch between overview of all descendants and detailed view of specific branches.

Taxonomy Classifications: Explore biological or product taxonomies. Zoom controls help navigate between broad categories and specific items.

File System Visualizers: Display directory structures with thousands of files. Zoom to see overview or drill into specific folders.

Decision Trees: Navigate complex decision structures. Zoom out to see full decision path, zoom in to examine individual decision points.

Specifying Zoom Level

Zoom Level Control - Programmatic zoom control for large graphs