Posted on 2015-05-22 17:37
TWaver 閱讀(6736)
評論(2) 編輯 收藏
前段時間，有個項目需要顯示一個很大的樹形拓撲結(jié)構(gòu)圖，而布局怎么都不好看。要生成一顆比較布局規(guī)矩、好看的樹狀圖，一個成熟、高效的樹形布局算法必不可少。Reingold Tilford是常用的一個，大家可以google一下。這個算法最先是由Edward Reingold和John Tilford一起發(fā)表的，并由他們的名字命名。有興趣的同學，可以研究一下這篇1981年的論文：
http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf，里面給出了這個算法的原理和邏輯代碼。這個算法的優(yōu)點是邏輯相對簡單，效率高。不過用js寫一遍也要消耗很多腦細胞。還要，twaver直接提供了這種算法和自動布局，我們可以直接使用。
下面看一看這種布局的用途。利用Reingold Tilford樹算法，我們可以把一個樹形結(jié)構(gòu)的數(shù)據(jù)，用不重疊、緊湊、分層的形式展示出來。最直接的用法就是直接生成一棵從左到右的樹，如下圖：
圖比較長，所以我們咔嚓了一刀，下面是后面一半的圖：
其實RT樹也可以做各種變化。例如我們把縱向旋轉(zhuǎn)成一圈進行排列，就會形成環(huán)形的RT樹：
看到這些，我們可能會想起D3.js。D3也可以做出這些圖形效果。相比之下，twaver使用起來會比較簡單，兩行代碼就可以調(diào)用任意形狀的自動布局算法：
1 //創(chuàng)建Autolayouter并綁定DataBox
2
3 var autoLayouter = new twaver.layout.AutoLayouter(box);
4
5 //開始布局,參數(shù)分別為布局類型和回掉函數(shù)
6
7 autoLayouter.doLayout(type,callback);
另外，在實際項目使用中，數(shù)據(jù)往往需要多種形式進行展現(xiàn)，例如樹、表格等配合拓撲圖進行一體的、全方位的展示。這時twaver的優(yōu)勢就比較明顯了。
下面這張圖，數(shù)據(jù)通過右邊的拓撲圖和左邊的樹同時展示，甚至樹上直接提供了勾選功能，選中后拓撲圖也會跟著選中（深色陰影）。這種應用在twaver里面可以直接new一個Tree和Network，與同一個box關(guān)聯(lián)即可。用D3估計還要其它的樹組件并做交互同步，可能比較麻煩。
不論哪種技術(shù)和產(chǎn)品，只要適合我們的使用需求就好。簡單、輕量、好用，就是好產(chǎn)品。
需要源代碼的同學請與我們聯(lián)系索取: info@servasoft.com