Complex hierarchical tree structure

I need to create a hierarchical tree ( something like this ), but I need some functions:

  • The ability to create nodes as I like (size, background image, fonts, etc.).
  • Auto Layout
  • Ability to connect nodes by dragging and dropping N 'drop

I looked at GoJs and its excellent, but canvas-based, and I could not find a way to make the nodes look exactly the way I want (actually not even remotely close it).

I also looked at d3.js , which is also great, but again, since it is an SVG for drawing nodes.

The main fuss here is the layout and connection of nodes, I can handle Drag N 'Drop my self, is there a library there that can handle the layout for me, so I can create the required div, design them, as I see, and let the library do only layout?

+5
source share
2 answers

Here are some examples of libraries.

If you want to avoid the canvas, try drag n drop for the following

CSS3 Tree Family

Slickmap

or see some canvas based libraries

JavaScript InfoVis Toolkit HyperTree / SpaceTree

jsPlumb

+3
source

While the late answer, I hope it can help others in the future. Here is a drag tree using the excellent D3.js library.

http://bl.ocks.org/robschmuecker/7880033

https://gist.github.com/robschmuecker/7880033

/, , , . .

+2

All Articles