折叠负载中的所有节点以获取非常大的组织结构图

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>