javascript - 树结构的布局几何/有吸引力地布置节点

Question

我有一个树状数据结构，我想在 SVG Canvas 上绘制它(使用 jQuery SVG。)我想渲染节点以一种有吸引力的间隔方式从上到下展开。

理想情况下，我需要一个类或函数，我可以向其传递树的表示形式并取回每个节点的 X 和 Y 坐标。不幸的是，我的谷歌搜索因列表树 GUI 小部件的数千次点击而受挫，这不是我想要的。

理想情况下，这将是一些 Javascript，但我也可以使用一些 Python(在服务器端使用。)我看了一下 this Github 上的 Python 内容，但我真的无法全面了解它的用法(或让它运行。)我还简要了解了 ete2a1。 ，但它未能正确安装，文档未完成，而且它似乎更适合将树木实际渲染为图像而不是几何图形。

很抱歉，如果这是一个模糊的问题，请告诉我是否可以更清楚地说明。基本上，我有这个:

Tree("Root",
    Tree("leaf 1",
        Tree("leaf 2",
            Tree("leaf 4"),
                Tree("leaf 5")), Tree("leaf 3",
                                    Tree("leaf 6"))))

这将呈现:

          Root
            |
          leaf 1
            |
            /\
           /  \
      leaf 2  leaf 3
        /\      \
       /  \      \
  leaf 4  leaf 5  leaf 6

(呃，这可能不太正确，但你明白了。)

非常感谢任何提示!

Answer 1

我强烈推荐 d3.js。这collapsible dendrogram非常适合大型数据集。还有一个 regular dendrogram .即插即用非常简单，尤其是在 jQuery 背景下。