Relation-Graph 树形结构默认展开首节点实现方案

Relation-Graph 是一个功能强大的关系图谱可视化库，在处理层级数据时，经常需要控制节点的展开状态。本文将详细介绍如何实现树形结构默认只展开第一个节点及其第一个子节点的效果。

需求分析

在展示层级数据时，有时我们希望初始状态下只展示关键路径节点，避免一次性展示过多信息造成视觉混乱。典型场景包括：

1. 大型组织结构图的渐进式展示
2. 复杂系统架构的层级浏览
3. 多级菜单的默认展开状态控制

核心实现思路

Relation-Graph 提供了完善的节点控制API，我们可以通过以下步骤实现目标效果：

1. 获取图谱实例
2. 定位根节点
3. 获取根节点的第一个子节点
4. 收起其他非首个子节点

具体实现代码

// 获取relation-graph实例
const graphInstance = this.$refs.graphRef.getInstance();

// 获取根节点（假设节点ID为'a'）
const rootNode = graphInstance.getNodeById('a');

// 获取根节点的所有子节点
const childrenNodes = rootNode.lot.childs;

// 确保至少有一个子节点
if (childrenNodes.length > 0) {
    // 获取第一个子节点
    const firstChildNode = childrenNodes[0];
    
    // 遍历所有子节点
    for (const childNode of childrenNodes) {
        if (childNode !== firstChildNode) {
            // 收起非首个子节点
            await graphInstance.collapseNode(childNode);
        }
    }
}

关键API解析

1. getInstance() - 获取Relation-Graph的实例对象，这是所有操作的基础
2. getNodeById() - 通过节点ID获取节点对象
3. lot.childs - 节点属性，包含该节点的所有子节点数组
4. collapseNode() - 收起指定节点的所有子节点

进阶应用

多级展开控制

如果需要进一步控制子节点的展开状态，可以递归应用相同逻辑：

async function controlExpand(node, depth = 0) {
    if (depth >= 2) return; // 控制展开深度
    
    const children = node.lot.childs;
    if (children.length > 0) {
        const firstChild = children[0];
        for (const child of children) {
            if (child !== firstChild) {
                await graphInstance.collapseNode(child);
            } else if (depth < 1) {
                await controlExpand(firstChild, depth + 1);
            }
        }
    }
}

动态展开策略

可以根据业务需求实现更复杂的展开逻辑：

function shouldExpand(node) {
    // 实现自定义展开逻辑
    return node.someProperty === 'important';
}

async function customExpandControl(node) {
    const children = node.lot.childs;
    for (const child of children) {
        if (shouldExpand(child)) {
            // 符合条件则保持展开
            await graphInstance.expandNode(child);
        } else {
            // 不符合条件则收起
            await graphInstance.collapseNode(child);
        }
    }
}

注意事项

1. 节点操作通常是异步的，建议使用await确保操作顺序
2. 在大规模数据场景下，频繁操作节点可能影响性能
3. 考虑添加过渡动画提升用户体验
4. 可以通过监听节点展开/收起事件实现更精细的控制

通过以上方法，开发者可以灵活控制Relation-Graph中树形结构的展示状态，实现各种复杂的业务需求。