Has anyone produced a virtualised javascript tree for thousands of nodes? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

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.

Answer 1

you can try jstree extension of jquery

When using AJAX set children to boolean true and jsTree will render the node as closed and make an additional request for that node when the user opens it.

core data

Answer 2

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

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.

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