getorgchart - 为非常大的组织结构图折叠所有加载节点

Question

我有一个需要渲染的约 6000 人的组织结构图。我相信你可以想象，一次加载有点太多了——

我想知道是否可以在折叠中加载所有节点，然后让搜索功能展开匹配节点的树。

或者也许有人知道加载这样一个巨大的组织结构图的更好方法？

非常感谢任何帮助！

Answer 1

OrgChart JS确实支持延迟加载，他们有一个包含 5000 个节点的示例，可能 6000 个不会有问题

这是演示：

window.onload = function () {
    var nodes = [];
    var links = [];
    var imgIndex = 1;
    for (var i = 1; i < 4496; i++) {
        nodes.push({
            id: i, name: i, photo: "//balkangraph.com/js/img/" + imgIndex + ".jpg"
        });
        imgIndex++;
        if (imgIndex > 10) {
            imgIndex = 1;
        }
    }

    for (var i = 2; i < 500; i++) {
        links.push({ from: i, to: 1 });

        for (var j = 1; j < 4; j++) {
            links.push({ from: 3 * i + j - 2, to: i });
            for (var k = 1; k < 4; k++) {
                links.push({ from: 3 * (3 * i + j - 2) + k - 2, to: 3 * i + j - 2 });
            }
        }
    }
    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        lazyLoading: true,
        showXScroll: BALKANGraph.scroll.visible,
        mouseScroolBehaviour: BALKANGraph.action.xScroll,
        layout: BALKANGraph.mixed,
        scaleInitial: BALKANGraph.match.height,
        nodeBinding: {
            field_0: "name",
            img_0: "photo"
        },
        links: links,
        nodes: nodes
    });  
};

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Helvetica;
}

#tree {
    width: 100%;
    height: 100%;
}

<script src="https://balkangraph.com/js/latest/OrgChart.js"></script>


<div id="tree"></div>