如何在初始渲染时自动扩展 d3-org-chart 中的特定级别？

Question

我正在使用 d3-org-chart 库创建组织结构图，我遇到一个问题，我想在初始时自动扩展根级别和接下来的两个级别（级别 0、1 和 2）使成为。然而，我正在努力实现这一目标。

这是我的代码的相关部分：

import * as d3 from 'd3';
import {OrgChart} from "d3-org-chart";

export function initializeOrgChart(usersData) {
    const formattedData = transformDataForOrgChart(usersData);

    const container = document.querySelector('.chart-container');
    if (container) {
        const orgChart = new OrgChart()
            // ... other configurations ...
            .container('.chart-container')
            .data(formattedData)
            .render();

        // Assuming formattedData[0] is the root element of the org chart
        expandSpecificLevels(formattedData[0], 0, 2, orgChart);

    }
}

function transformDataForOrgChart(users) {
    return users.map(user => {
        return {
            customId: user.id,
            customFullName: user.fullName,
            customEmail: user.email,
            customJob: user.job,
            customLocation: user.location,
            customPicture: user.picture ? user.picture : null,
            customParentId: user.managerId
        };
    });
}

// Example function to expand specific levels - not working as expected
function expandSpecificLevels(node, currentLevel, maxLevel, orgChart) {
    if (currentLevel <= maxLevel) {
        orgChart.expand(node);

        if (node.children && node.children.length > 0) {
            node.children.forEach(childNode => {
                expandSpecificLevels(childNode, currentLevel + 1, maxLevel, orgChart);
            });
        }
    }
}

我尝试过使用递归函数expandSpecificLevels来展开节点，但似乎不起作用。图表在不扩展指定级别的情况下呈现。我也尝试过使用setTimeout延迟渲染后展开，但是没有效果

有人可以帮助我了解如何在初始渲染时正确扩展 d3-org-chart 中的特定级别吗？任何见解或替代方法将不胜感激。

Answer 1

您想在初始渲染时扩展某些级别 (2)，因此请使用 .initialExpandLevel

的设置

chart = new d3.OrgChart()
      .initialExpandLevel(2)
       :
       :

您将等待结果..

您可以在此处看到此参数的影响