在HTML中绘制树形结构

我正在做一个学校作业，以可视化深度搜索算法，并且想要可视化JavaScript创建的树。我写的JavaScript来实现深入的搜索，但我有麻烦可视化tree.Currently我创建了一个对象具有属性的节点：在HTML中绘制树形结构

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

    return Node; 
}

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

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

什么，我的问题是，我想获得一些指导如何动态地展开分支长度，使不同的孩子也不会崩溃。

来源

2015-10-14 Banana

你打算如何在HTML摆在首位“画”？画布，SVG，HTML？ – Bergi

我以为可能使用不同大小的div-s，所以HTML – Banana

那么自然嵌套的div呢？那么你不需要关心折叠。只画线会有点复杂。不过，我认为你应该去找像[this]这样的结构（https://commons.wikimedia.org/wiki/Category:Tree_structures#/media/File:1-dimensional-range-tree.svg） – Bergi

对于此特定任务，我使用了Treant.js。真的很简单，使用和绘制很好的合适的树。树上有大约60个元素，没有碰撞。

下面是从结果一点点剪断（这是滚动的，可能不适合所有在一个页面上）

来源

2015-10-15 14:40:08 Banana

在HTML中绘制树形结构

回答

相关问题