Question

目前我正在尝试扩展包含超过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);

然而，这需要几分钟而且非常迟钝。我有没有其他方法可以一次性完成打开这个数量的节点，这将导致更快的完成？

Answer 1

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

所以我的猜测如果不仔细看问题就是你不能这样做。你可能不应该这样做：人类大脑无法处理那么多信息，也没有可以显示所有信息的电脑屏幕。更加努力地思考你真正想要实现的目标并找到更好的代表性。

你可以向穷人倾倒大量数据，但这会淹没他们。找到一种方法来展示重要的位，即少量垃圾下的少数宝石。

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

1 个答案: