在 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 个元素，没有发生碰撞。

这是结果的一小部分（它是可滚动的，无法在一页上全部容纳）