Complesso albero heirarchical disposizione

Question

ho bisogno di creare un albero gerarchico (something like this), ma ho bisogno di alcune caratteristiche:

1. Capacità di progettare i nodi come mi piace (dimensioni, immagine di sfondo, font, ecc)
2. automatica del layout
3. Possibilità di collegare i nodi a goccia drag n'

ho guardato GoJs e la sua grande, ma è di tela base, e non ho potuto trovare un modo per ma ke i nodi appaiono esattamente come voglio (in realtà neanche lontanamente chiusi).

Ho anche guardato allo d3.js che è anche ottimo ma, ancora una volta, poiché è SVG è un tesoro per progettare i nodi.

La fretta principale qui è il layout, e collegamento dei nodi, posso gestire il drag n' drop me stesso, C'è una biblioteca là fuori che può gestire il layout per me, quindi posso creare i div richieste di, disegnarli come ritengo opportuno e lasciare che la libreria esegua solo il layout?

Answer 1

Ecco alcune librerie di esempio.

Se si vuole evitare di tela, provare l'attuazione di drag'n'drop per il seguente

CSS3 Family Tree

SlickMap

oppure vedere librerie basate qualche tela

JavaScript InfoVis Toolkit's HyperTree/SpaceTree

jsPlumb

Answer 2

Mentre una risposta in ritardo, si spera che possa aiutare gli altri in futuro. Ecco una struttura drag and drop che utilizza l'eccellente libreria D3.js.

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

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

L'albero nell'esempio maniglie automatico layout/dimensionamento, zoom, panning, trascinamento ed è pieghevole. Tutti o nessuno degli aspetti possono essere rimossi, se necessario.