Draw a binary tree

Question

I'm looking for a js lib which allows the user to draw a binary tree : add/remove a leaf, add/remove a parent node, etc.

I've found many libs but most of them are made for data visualization only (eg: d3), not drawing from the browser.

Does this even exist ?

Thanks!

I know I'm a bad case of NIH syndrome, but wouldn't that trivial enough and fun enough to write it yourself? Also do you mean interactively creating a tree or drawing a tree given the definition (e.g. just computing a decent tree geometry for visualization)? — 6502, Jan 20 '14 at 10:27
I meant the former : interactively creating a tree (generate a node, click on a button, generate a leaf, click, append a leaf to the leaf, etc.). — Simon, Jan 20 '14 at 10:31

score 1 · Answer 1 · edited May 23 '17 at 10:32

1

Have a look at existing stuff to draw graphs (a tree is a graph):

You may also write it yourself by drawing to a HTML canvas for example:

edited May 23 '17 at 10:32

Community

answered Jan 20 '14 at 10:29

Christophe Roussy

Thanks :) I preferred to say `tree` because `graph` may sound like `charts` for some people. I know how to draw in a canvas, I'd just prefer to know if a solution already existed for that. No need to reinvent the wheel! – Simon Jan 20 '14 at 10:37
That tree model js thing looks fine :) – Christophe Roussy Jan 20 '14 at 10:42
Actually, I'm not sure. It seems like it's a nodejs package, not a client side lib :( – Simon Jan 20 '14 at 10:44
As stated above, tree-model is "just" a data structure manipulation lib, not a visualization tool. I'll give http://www.jointjs.com/ a try or do it by myself. – Simon Jan 20 '14 at 16:15

score 1 · Answer 2 · answered Jan 20 '14 at 10:33

1

Tree-model-js has animated example on main page by svg. You can copy and use it.

answered Jan 20 '14 at 10:33

Alex

Mmh. Yeah, the visualization used here is home made using d3. The tree-model lib only allows data structure manipulation, not its visualization. I guess I'll do that by myself or use something like http://www.jointjs.com/ – Simon Jan 20 '14 at 16:14

2 Answers2