带有大型树数据集的缩放级别控制

功能概述

本示例演示了包含 100 多个节点的大型树形结构图上的程序化缩放控制。用户可以通过下拉菜单从预设缩放级别（10%、20%、40%、80%、100%）中进行选择，图会立即调整以显示不同级别的细节。该示例展示了如何使用 setZoom() API 控制放大倍数，对于导航大型分层数据集很有用。

核心特性实现

缩放状态管理

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

带缩放的图初始化

const initializeGraph = async () => {
    const myJsonData: RGJsonData = {
        rootId: 'a',
        nodes: [
            // 树形结构中的 100+ 节点
        ],
        lines: [
            // 树形连接
        ]
    };

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

缩放更新效果

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

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

缩放控制 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));
    }}
/>

垂直树形布局

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

创意使用场景

大型组织架构图：导航拥有数千名员工的企业层级结构。缩小以查看概览，放大以查看部门详细信息。

家谱树：浏览庞大的家族树。使用缩放在所有后代概览和特定分支详细视图之间切换。

分类法分类：探索生物学或产品分类法。缩放控件有助于在广泛类别和特定项目之间导航。

文件系统可视化器：显示包含数千个文件的目录结构。缩放以查看概览或深入到特定文件夹。

决策树：导航复杂的决策结构。缩小查看完整决策路径，放大检查单个决策点。

指定缩放比例

缩放级别控制 - 大图的程序化缩放控制