复杂的层次树布局

Question

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

1. 能够随心所欲地设计节点（大小、背景图像、字体等）
2. 自动布局
3. 能够通过拖放 N' 连接节点

我看过GoJs，它很棒，但它是基于画布的，我无法找到一种方法让节点看起来完全符合我的要求（实际上甚至不是很接近）。

我也看过d3.js，这也很棒，但同样，因为它是 SVG，所以很难设计节点。

这里的主要工作是布局和连接节点，我可以处理 Drag N' Drop 我自己，是否有一个库可以为我处理布局，所以我可以创建所需的 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

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