javascript - 复杂的层次树布局

Question

我需要创建一个分层树（像这样），但我需要一些功能：

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

我看过GoJs和它的伟大，但它是基于画布的，我找不到让节点看起来完全符合我想要的方法（实际上甚至没有远程关闭）。

我还查看了d3.js，它也很棒，但又一次，因为它是 SVG，所以很难设计节点。

这里的主要喧嚣是布局，并连接节点，我可以处理 Drag N' Drop 我自己，是否有一个库可以为我处理布局，所以我可以创建所需的 div，将它们设计为我看合适，让图书馆只做布局的东西？

Answer 1

以下是一些示例库。

如果您想避免画布，请尝试为以下内容实现拖放

CSS3 家谱

光滑地图

或者查看一些基于画布的库

JavaScript InfoVis Toolkit 的 HyperTree / SpaceTree

jsPlumb

Answer 2

虽然答案较晚，但希望它可以在未来对其他人有所帮助。这是一个使用出色的 D3.js 库的拖放树。

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

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

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