有没有人为数千个节点生成虚拟化的javascript树？ [英] Has anyone produced a virtualised javascript tree for thousands of nodes?

问题描述

我正在尝试将应用程序移动到包含最多50,000个节点的树的Web。我首先尝试使用jqxtree小部件来生成它，但DOM太大了，它们显然不支持数千个节点。

I'm trying to move an application to the web that contains a tree of up to 50,000 nodes. I first tried to produce this using jqxtree widget, but the DOM was far too large and they clearly don't support thousands of nodes.

我正在寻找一个虚拟化的解决方案，虽然我已经看到了包含数百万个项目的列表的几个例子，但我还没有看到一个使用树的人。还有其他人做过吗？有可能吗？

I'm looking for a virtualised solution and while I've seen several examples of lists containing millions of items, I've yet to see one working with a tree. Has anyone else made this? Is it possible?

树不需要拖放等任何功能。它只是一个展开/折叠/点击事件。

The tree doesn't require any features like drag and drop. It's just an expand/collapse/click event thing.

推荐答案

我可以推荐使用优秀的d3.js 图书馆。
我已根据我之前的git gist进行了测试设置： http://bl.ocks.org/ robschmuecker / 7926762
随着要点在这里：
https://gist.github.com / robschmuecker / 7926762

I can recommend using the excellent d3.js library. I have made a test setup based on a previous git gist of mine here: http://bl.ocks.org/robschmuecker/7926762 With the gist being here: https://gist.github.com/robschmuecker/7926762

那里有超过50,000个节点，但是为了提高性能，孩子们开始崩溃很重要。如果是这种情况，我发现在现代浏览器上性能是非常可接受的。树可扩展，自动调整大小，可缩放，可拖放。

There are over 50,000 nodes there, however for performance it is important that the children start off collapsed. If that is the case I have found the performance to be very acceptable on a modern browser. The tree is expandable, auto-sizing, zoomable, drag&droppable.

此基础的原始代码位于：
https://gist.github.com/robschmuecker/7880033

The original code that this is based off is here: https://gist.github.com/robschmuecker/7880033

这篇关于有没有人为数千个节点生成虚拟化的javascript树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！