在 d3.js 中一次打开 500 多个节点答案

【问题标题】：Opening 500+ nodes at once in d3.js在 d3.js 中一次打开 500 多个节点
【发布时间】：2015-04-23 16:18:14
【问题描述】：

目前我正在尝试扩展一个包含超过 100,000 个节点的 d3.js 树。许多叶子存在于多个父项下，因为它们适合多个部分/项目/区域。用户执行的搜索会导致树向具有该节点 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);

但是，这需要几分钟并且非常滞后。我还有其他方法可以一次性打开这么多节点，从而更快完成吗？

【问题讨论】：

标签： javascript html css d3.js

【解决方案1】：

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

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

您可以向可怜的用户倾倒大量数据，但这只会淹没他们。想办法只展示重要的部分，大量垃圾下的少数宝石。

【讨论】：