一種二叉樹(shù)可視化方案
摘要
在學(xué)習(xí)數(shù)據(jù)結(jié)構(gòu)尤其是二叉樹(shù)部分、以及做二叉樹(shù)有關(guān)的算法題的時(shí)候，程序出了問(wèn)題不容易發(fā)現(xiàn)。因?yàn)槎鏄?shù)打印出來(lái)的格式不夠直觀。這篇文章提供一種將二叉樹(shù)通過(guò)轉(zhuǎn)化為html來(lái)直觀可視化的方法。
主要思路
通過(guò)打印二叉樹(shù)的帶有空格縮進(jìn)的層次格式的先序序列
將打印在控制臺(tái)上的文本復(fù)制到txt中
運(yùn)行python腳本，該腳本能夠讀取文本文件并自動(dòng)生成html代碼并生成網(wǎng)頁(yè)文件
用瀏覽器打開(kāi)生成的html文件即可看到
詳細(xì)過(guò)程
（一）打印先序序列
以C語(yǔ)言為例，打印一個(gè)二叉樹(shù)可以用以下方法實(shí)現(xiàn)。
調(diào)用printAVL得到的效果是這樣的：
小括號(hào)表示這個(gè)節(jié)點(diǎn)所構(gòu)成的子樹(shù)的高度，這個(gè)可以省略不打印，這個(gè)是為了做平衡二叉樹(shù)方便測(cè)試用的。
^表示的是NULL。小括號(hào)前面的節(jié)點(diǎn)表示二叉樹(shù)節(jié)點(diǎn)的值。空格表示層級(jí)關(guān)系。如同文件夾展開(kāi)樹(shù)一樣。
就如同這樣一個(gè)二叉樹(shù)一樣。學(xué)習(xí)資料是左子樹(shù)，軟件是右子樹(shù)。先后區(qū)分了左右。
（二）復(fù)制到txt中并運(yùn)行python腳本
這段python3代碼不借助任何第三方庫(kù)即可運(yùn)行。
若要成功運(yùn)行，需要在同文件夾下新建input.txt并寫(xiě)入內(nèi)容。
然而這個(gè)html代碼需要引入css文件。
需要在同文件夾下新建 index.css文件。下面給出生成css文件的less文件。讀者可以自行搜索如何將LESS文件編譯為css文件。vscode中已有相關(guān)插件。
（三）通過(guò)瀏覽器查看生成效果
缺點(diǎn)
數(shù)字?jǐn)?shù)值大的話(huà)葉子節(jié)點(diǎn)容易密集擠在一起看不清。
css做出來(lái)的格式可能還不夠好看。
生成的時(shí)間復(fù)雜度是ON2量級(jí)，可能還有更優(yōu)的解法。不過(guò)經(jīng)測(cè)試發(fā)現(xiàn)都是一瞬間的事情。節(jié)點(diǎn)數(shù)量再多了也看不清了。
