Posted on 2015-05-22 17:37
TWaver 阅读(6639)
评论(2) 编辑 收藏
前段时间，有个项目需要显示一个很大的树形拓扑结构图，而布局怎么都不好看。要生成一颗比较布局规矩、好看的树状图，一个成熟、高效的树形布局算法必不可少。Reingold Tilford是常用的一个，大家可以google一下。这个算法最先是由Edward Reingold和John Tilford一起发表的，并由他们的名字命名。有兴趣的同学，可以研究一下这篇1981年的论文：
http://emr.cs.iit.edu/~reingold/tidier-drawings.pdf，里面给出了这个算法的原理和逻辑代码。这个算法的优点是逻辑相对简单，效率高。不过用js写一遍也要消耗很多脑细胞。还要，twaver直接提供了这种算法和自动布局，我们可以直接使用。
下面看一看这种布局的用途。利用Reingold Tilford树算法，我们可以把一个树形结构的数据，用不重叠、紧凑、分层的形式展示出来。最直接的用法就是直接生成一棵从左到右的树，如下图：
图比较长，所以我们咔嚓了一刀，下面是后面一半的图：
其实RT树也可以做各种变化。例如我们把纵向旋转成一圈进行排列，就会形成环形的RT树：
看到这些，我们可能会想起D3.js。D3也可以做出这些图形效果。相比之下，twaver使用起来会比较简单，两行代码就可以调用任意形状的自动布局算法：
1 //创建Autolayouter并绑定DataBox
2
3 var autoLayouter = new twaver.layout.AutoLayouter(box);
4
5 //开始布局,参数分别为布局类型和回掉函数
6
7 autoLayouter.doLayout(type,callback);
另外，在实际项目使用中，数据往往需要多种形式进行展现，例如树、表格等配合拓扑图进行一体的、全方位的展示。这时twaver的优势就比较明显了。
下面这张图，数据通过右边的拓扑图和左边的树同时展示，甚至树上直接提供了勾选功能，选中后拓扑图也会跟着选中（深色阴影）。这种应用在twaver里面可以直接new一个Tree和Network，与同一个box关联即可。用D3估计还要其它的树组件并做交互同步，可能比较麻烦。
不论哪种技术和产品，只要适合我们的使用需求就好。简单、轻量、好用，就是好产品。
需要源代码的同学请与我们联系索取: info@servasoft.com