如何在d3-org-chart初始渲染时自动展开指定层级？

核心问题分析 #

你当前的代码无效，主要有两个原因：

1. 原始formattedData中的节点没有children属性——这个属性是d3-org-chart在渲染时通过解析customParentId动态生成的，递归函数无法遍历子节点。
2. 调用orgChart.expand(node)时传入的是原始数据节点，而库内部需要的是它处理后带有状态标记（如_collapsed）的节点对象。

方案一：使用官方内置配置（推荐） #

如果你的d3-org-chart版本足够新（v3+），库提供了initialExpandLevel配置项，可以直接指定初始展开的层级：

export function initializeOrgChart(usersData) {
    const formattedData = transformDataForOrgChart(usersData);
    const container = document.querySelector('.chart-container');
    
    if (container) {
        const orgChart = new OrgChart()
            // ... 保留你的其他配置
            .container('.chart-container')
            .data(formattedData)
            .initialExpandLevel(2) // 展开层级0、1、2（共3层）
            .render();
    }
}

方案二：手动遍历处理后的节点展开 #

如果版本不支持initialExpandLevel，可以在渲染后获取库处理过的完整树形节点，再递归展开：

export function initializeOrgChart(usersData) {
    const formattedData = transformDataForOrgChart(usersData);
    const container = document.querySelector('.chart-container');
    
    if (container) {
        const orgChart = new OrgChart()
            // ... 你的其他配置
            .container('.chart-container')
            .data(formattedData)
            .render();

        // 获取库处理后的根节点（已包含children属性）
        const processedRoot = orgChart.data()[0];
        expandSpecificLevels(processedRoot, 0, 2, orgChart);
    }
}

function expandSpecificLevels(node, currentLevel, maxLevel, orgChart) {
    if (currentLevel <= maxLevel) {
        // 只展开处于折叠状态的节点
        if (node._collapsed) {
            orgChart.expand(node);
        }
        // 遍历库生成的children节点
        if (node.children && node.children.length > 0) {
            node.children.forEach(child => {
                expandSpecificLevels(child, currentLevel + 1, maxLevel, orgChart);
            });
        }
    }
}

方案三：预先在数据中标记展开状态 #

你可以在格式化数据时，给需要展开的节点添加_collapsed属性（库会自动识别这个标记）：

function transformDataForOrgChart(users) {
    // 先把所有用户存入Map方便查找
    const userMap = new Map(users.map(user => [user.id, {
        customId: user.id,
        customFullName: user.fullName,
        customEmail: user.email,
        customJob: user.job,
        customLocation: user.location,
        customPicture: user.picture || null,
        customParentId: user.managerId,
        _collapsed: true // 默认折叠
    }]));

    const rootNodes = [];
    // 构建树形结构并设置展开状态
    users.forEach(user => {
        const node = userMap.get(user.id);
        if (!user.managerId) {
            rootNodes.push(node);
            setExpandState(node, 0, 2); // 从根节点（层级0）开始，展开到层级2
        } else {
            const parent = userMap.get(user.managerId);
            parent.children = parent.children || [];
            parent.children.push(node);
        }
    });

    // 递归设置节点的折叠状态
    function setExpandState(node, currentLevel, maxLevel) {
        // 层级<=maxLevel的节点设置为展开（_collapsed=false）
        node._collapsed = currentLevel > maxLevel;
        if (node.children) {
            node.children.forEach(child => setExpandState(child, currentLevel + 1, maxLevel));
        }
    }

    return rootNodes;
}

渲染时无需额外调用展开方法，库会自动根据_collapsed属性渲染：

const orgChart = new OrgChart()
    // ... 你的其他配置
    .container('.chart-container')
    .data(formattedData)
    .render();

内容的提问来源于stack exchange，提问作者Rémi LCD