在HTML中绘制树结构

Question

我正在做一个学校任务来可视化深入的搜索算法，我想想象javascript创建的树。我已经编写了javascript来实现深入搜索，但是我在查看树时遇到了麻烦。目前我为一个具有属性的节点创建了一个对象：

function createNode(parent,name,suur,vaike){
    var Node = new Object();
    Node["name"]= name;
    Node["children"] = [];
    Node["parent"] = parent;

    return Node;
}

一般来说，用HTML绘制树并不是很困难，但在开始编写可视化代码之前，我想先了解它。我所说的主要问题是分支的长度必须动态变化 - 如果将新的子项添加到树中，那么树将会扩展，因此不同的元素不会崩溃。

这是来自维基百科的图片，我很想得到这样的结果。

我的问题是，我想得到一些指示，如何动态扩展分支长度，以便不同的孩子不会崩溃。

Answer 1

对于这项特殊任务，我使用了Treant.js。使用起来非常简单，并且画得很漂亮。在树中有大约60个元素，没有碰撞。

这是结果中的一小部分（它可滚动，无法在一页上显示）