复杂的家谱布局

Complex heirarchical tree layout

本文关键字：布局 家谱 复杂      更新时间：2023-09-26

我需要创建一个层次树（类似这样），但我需要一些功能：

  1. 能够根据自己的喜好设计节点（大小、背景图像、字体等）
  2. 自动布局
  3. 通过拖放连接节点的能力

我看过GoJs及其出色之处，但它是基于画布的，我找不到一种方法来让节点看起来完全像我想要的那样（实际上甚至根本不接近）。

我还研究了d3.js，它也很棒，但同样，由于它是SVG，所以设计节点是很困难的。

这里的主要工作是布局，连接节点，我可以自己处理Drag N'Drop，有没有一个库可以为我处理布局，这样我就可以创建所需的div，按照我认为合适的方式设计它们，让库只做布局的事情？

以下是一些示例库。

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

CSS3家谱

SlickMap

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

JavaScript InfoVis工具包的HyperTree/SpaceTree

jsPlumb

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

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

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

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

相关文章：