深度节点遍历与高亮显示

演示如何从选中的节点递归遍历所有后代节点并高亮显示完整的子图，同时使其他节点变暗。

深度节点遍历与高亮显示

功能概述

此示例演示如何从选中的节点开始递归遍历所有后代节点并高亮显示完整的子图。非后代节点会变暗以将注意力集中在选中的分支上。

核心特性实现

递归遍历函数

实现一个深度优先遍历函数，收集所有子节点和孙节点 ID：

const deepGetAllChildIds = (node: RGNode, ids: string[] = []): string[] => {
    if (ids.includes(node.id)) return ids;
    ids.push(node.id);
    // node.lot.childs 是访问子节点的标准方式
    for (const cNode of node.lot.childs) {
        deepGetAllChildIds(cNode, ids);
    }
    return ids;
};

节点单击处理

当单击��点时，遍历其后代并应用视觉高亮：

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    const allChildIds = deepGetAllChildIds(nodeObject);

    // 更新节点：高亮后代，使其他节点变暗
    graphInstance.getNodes().forEach(node => {
        if (allChildIds.includes(node.id)) {
            graphInstance.updateNode(node, {
                opacity: 1,
                color: 'rgb(116,2,173)'
            });
        } else {
            graphInstance.updateNode(node, {
                opacity: 0.1,
                color: undefined
            });
        }
    });

    // 更新连线：高亮子图内的连接
    graphInstance.getLines().forEach(line => {
        if (allChildIds.includes(line.from) && allChildIds.includes(line.to)) {
            graphInstance.updateLine(line, { color: 'rgb(116,2,173)' });
        } else {
            graphInstance.updateLine(line, { color: undefined });
        }
    });

    graphInstance.dataUpdated();
};

单击画布重置

单击空白画布会将所有节点和连线重置为原始状态：

const onCanvasClick = ($event: RGUserEvent) => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNode(node, { opacity: 1, color: undefined });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, { color: undefined });
    });
    graphInstance.dataUpdated();
};

访问子节点

node.lot.childs 属性提供对树结构中节点直接子节点的访问。在使用树形布局或分层数据时会填充此属性。

创意使用场景

• 组织架构图：高亮显示部门及其所有子部门
• 文件系统浏览器：聚焦于目录及其全部内容
• 决策树：强调分支及其所有结果
• 物料清单：显示组件及其所有子组件
• 技能树：显示技能及其所有前置技能