在d3.js中一次打開500多個節點

Question

目前我正在嘗試擴展包含100,000多個節點的d3.js樹。許多葉子存在於多個父母身上，因爲它們適合多個部分/項目/地區。用戶執行的搜索會導致樹打開到具有該節點ID的所有葉子。這可能導致圖形嘗試打開，在極少數情況下，一次最多可打開2000個葉節點。目前，我發現唯一不會崩潰的方法就是使用以下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秒。

所以我沒有仔細觀察問題的猜測是你不能這樣做。而且你可能不應該這樣做：人類的大腦不能處理那麼多的信息，也沒有可以顯示所有信息的計算機屏幕。想想你真正想要達到什麼並找到更好的代表。

您可以將大量數據轉儲給可憐的用戶，但這隻會淹死他們。找到一種方式來呈現重要的東西，這些垃圾下的幾顆寶石。