在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中繪製樹形結構

回答

相關問題