复杂的分层树布局

Question

我需要创建一个分层树（something like this），但我需要一些功能：

1. 能够设计我喜欢的节点（大小，背景图像，字体等）
2. 自动布局
3. 能够通过拖动N'drop
连接节点

我看过GoJs并且它很棒，但它是基于画布的，我找不到一种方法让节点看起来像我想要的那样（实际上甚至没有远程关闭）。

我也看了d3.js这也很棒，但是再次，因为它是SVG，设计节点是不好的。

这里的主要喧嚣是布局，连接节点，我可以处理拖动N'掉我自己，那里有一个可以处理布局的库，所以我可以创建所需的div，设计他们认为合适，让图书馆只做布局？

Answer 1

以下是一些示例库。

如果您想避开画布，请尝试执行以下

的拖放操作

CSS3 Family Tree

SlickMap

或者看一些基于画布的库

JavaScript InfoVis Toolkit's HyperTree / SpaceTree

jsPlumb

Answer 2

虽然回答很晚，但希望将来可以帮助其他人。 这是一个使用优秀的D3.js库的拖放树。

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

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

示例中的树处理自动布局/大小调整，缩放，平移，拖放和可折叠。如果需要，可以删除所有或任何方面。