按级别展开节点

演示在分层结构中将节点展开到特定深度级别，并提供基于级别的控制。

按级别展开节点

功能概述

本示例演示如何将节点展开到层次结构中的特定深度级别。用户可以控制一次显示树的多少级别。

核心特性实现

基于级别的展开

const openByDeep = (deep: number) => {
    myMixTreeLayout.current.expandAllGroupByDeep(deep);
    graphInstance.zoomToFit();
};

混合树形布局

使用支持基于级别展开和颜色编码级别的自定义混合树形布局：

myMixTreeLayout.current.setLevelColors(['#7e22ce30', '#2564eb3a', '#71c9053d', '#ea5a0c34']);

展开/折叠处理器

const onNodeExpand = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

const onNodeCollapse = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

创意使用场景

组织架构图：显示仅前 2 个级别用于高管视图，展开到 5 个级别以查看完整详细信息。控制信息过载。

产品类别：最初显示顶级类别，用户按级别向下钻取。产品层次的渐进式披露。

文件系统树：默认显示前 2 个级别，根据需要展开。防止深目录结构让用户不知所措。

决策树：从主要决策开始，根据需要展开分支。引导用户完成复杂的决策过程。

物料清单：显示顶级装配，按级别展开以查看组件。用于成本估算和采购。

站点地图：最初显示主要部分，展开级别以查看详细信息。帮助用户了解站点结构。

知识图谱：显示顶级域，按级别展开以查看主题。知识域的渐进式探索。

流程层次：显示主要流程，按级别展开以查看子流程。管理流程文档的复杂性。