javascript - 在 d3.js 中一次打开 500+ 个节点

Question

目前我正在尝试扩展包含超过 100,000 个节点的 d3.js 树。许多叶子存在于多个 parent 之下，因为它们适合多个部分/元素/区域。用户执行的搜索导致树向所有具有该节点 ID 的叶子开放。这可能会导致图表在极少数情况下同时尝试打开多达 2000 个叶节点。目前，我发现在不使 Chrome 崩溃的情况下执行此操作的唯一方法是使用以下 setInterval 代码。

var timeout = setInterval(function(){
    for(var j = i; j < i + 10 ; j++){
        makeEl(d[j]);
        Search.rules += (j+1) + ") " + Graph.findNode(d[j]) + "<br><br>";
        highlightPathTo(d[j].id);
        if(j >= d.length - 1){
            //When all of the elements have been itterated through.
            clearInterval(timeout);
            highlight.selected = d; 
            $('#highlights').removeClass('empty'); 
            break;
        }
    }
    i+=10;
}, 500);

但是，这需要几分钟时间并且非常缓慢。我是否有任何其他方法可以一次性打开这么多节点，从而更快地完成？

Answer 1

不太可能。 JavaScript 和浏览器无法神奇地超越物理(或您的计算机)的限制。浏览器在处理大量文档方面取得了长足的进步。但也有限制。我不确定每个树节点需要多少内存，但如果每个树节点只需要 1 KB，那么我们谈论的是需要在屏幕上呈现的 100 MB 原始数据。如果每个节点只需要 10 毫秒来呈现，那么简单地绘制页面将需要 1000 秒。

因此，如果不更仔细地研究问题，我的猜测是您无法做到这一点。你可能不应该:人脑无法处理那么多信息，也没有可以显示所有信息的计算机屏幕。认真思考您真正想要实现的目标并找到更好的表示方式。

您可以向可怜的用户倾倒大量数据，但这只会淹没他们。找到一种方法来展示重要的部分，即大量垃圾下的少数 gem 。