TWaver - 專注UI技術(shù)

前段時(shí)間，有個(gè)項(xiàng)目需要顯示一個(gè)很大的樹(shù)形拓?fù)浣Y(jié)構(gòu)圖，而布局怎么都不好看。要生成一顆比較布局規(guī)矩、好看的樹(shù)狀圖，一個(gè)成熟、高效的樹(shù)形布局算法必不可少。Reingold Tilford是常用的一個(gè)，大家可以google一下。這個(gè)算法最先是由Edward Reingold和John Tilford一起發(fā)表的，并由他們的名字命名。有興趣的同學(xué)，可以研究一下這篇1981年的論文：http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf，里面給出了這個(gè)算法的原理和邏輯代碼。這個(gè)算法的優(yōu)點(diǎn)是邏輯相對(duì)簡(jiǎn)單，效率高。不過(guò)用js寫一遍也要消耗很多腦細(xì)胞。還要，twaver直接提供了這種算法和自動(dòng)布局，我們可以直接使用。 下面看一看這種布局的用途。利用Reingold Tilford樹(shù)算法，我們可以把一個(gè)樹(shù)形結(jié)構(gòu)的數(shù)據(jù)，用不重疊、緊湊、分層的形式展示出來(lái)。最直接的用法就是直接生成一棵從左到右的樹(shù)，如下圖：
圖比較長(zhǎng)，所以我們咔嚓了一刀，下面是后面一半的圖：
     
其實(shí)RT樹(shù)也可以做各種變化。例如我們把縱向旋轉(zhuǎn)成一圈進(jìn)行排列，就會(huì)形成環(huán)形的RT樹(shù)：

看到這些，我們可能會(huì)想起D3.js。D3也可以做出這些圖形效果。相比之下，twaver使用起來(lái)會(huì)比較簡(jiǎn)單，兩行代碼就可以調(diào)用任意形狀的自動(dòng)布局算法：

另外，在實(shí)際項(xiàng)目使用中，數(shù)據(jù)往往需要多種形式進(jìn)行展現(xiàn)，例如樹(shù)、表格等配合拓?fù)鋱D進(jìn)行一體的、全方位的展示。這時(shí)twaver的優(yōu)勢(shì)就比較明顯了。
下面這張圖，數(shù)據(jù)通過(guò)右邊的拓?fù)鋱D和左邊的樹(shù)同時(shí)展示，甚至樹(shù)上直接提供了勾選功能，選中后拓?fù)鋱D也會(huì)跟著選中（深色陰影）。這種應(yīng)用在twaver里面可以直接new一個(gè)Tree和Network，與同一個(gè)box關(guān)聯(lián)即可。用D3估計(jì)還要其它的樹(shù)組件并做交互同步，可能比較麻煩。
 
不論哪種技術(shù)和產(chǎn)品，只要適合我們的使用需求就好。簡(jiǎn)單、輕量、好用，就是好產(chǎn)品。
需要源代碼的同學(xué)請(qǐng)與我們聯(lián)系索取: info@servasoft.com