Complex heirarchical tree layout

Question

I need to create an hierarchical tree (something like this), but i need some features:

1. Ability to design the nodes as i like (size, background image, fonts etc.)
2. Automatic layout
3. Ability to connect nodes by drag N' drop

I've looked at GoJs and its great, but it's canvas based, and i couldn't find a way to make the nodes look exactly as I want (actually not even remotely close).

I've also looked at d3.js which is also great but again, since it's SVG it's haard to design the nodes.

The main hustle here is the layout, and connecting the nodes, i can handle the Drag N' Drop my self, Is there a library out there that can handle the layout for me , so i can create the required div's, design them as i see fit and let the library do just the layout stuff?

Answer 1

Here are some sample libraries.

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

CSS3 Family Tree

SlickMap

or else see some canvas based libraries

JavaScript InfoVis Toolkit's HyperTree / SpaceTree

jsPlumb

Answer 2

Whilst a late answer, hopefully it can help others in the future. Here is a drag and drop tree utilising the excellent D3.js library.

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

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

The tree in the example handles automatic layout/sizing, zooming, panning, drag and drop and is collapsible. All or none of the aspects can be removed if needed.