MultipleHelix:一种借鉴DNA螺旋结构的层次数据可视化方法

王大卫

摘要：借鉴DNA螺旋结构的可视化方法可以降低节点布局复杂度，减少视觉杂乱，提升用户体验，在分析层次数据关联时有着一定的价值和优势。针对层次数据的可视需求，在传统节点链接法的基础上综合圆环布局、螺旋布局、旋转交互等可视技术，提出一种基于螺旋结构的可视化方法MultipleHelix。利用MultipleHelix可视方法对网络课程层次数据进行可视化分析与展示。

关键词： 层次数据螺旋结构 数据可视化

一、引言

随着互联网、云计算、物联网等信息技术的蓬勃发展，信息技术与人类经济、科研、生活等方方面面进行了高度融合，产生超越任何年代的海量数据。通常，数据的分析往往离不开机器和人的相互协作。所以数据分析一般从两个维度展开一是从机器或计算机的角度出发，强调机器的计算能力和人工智能，以各种高性能处理算法、智能搜索与挖掘算法等为主要内容;另一个维度以人作为分析主体和需求主体出发，强调基于人机交互的、符合人的认知规律的分析方法，这一分支以数据可视化为主要代表。

层次数据是一种常见的数据类型，例如文件系统、网络课程数据、地域经济等都是典型的层次数据。经典层次数据可视化方法有节点链接法和空间填充法2中表现形式。空间填充法的典型代表为树图（Treemap），该方法能充分利用显示空间，通过利用填充面积、填充颜色填充文理等方法进行节点标注但在层次关系的体现上略显晦涩。传统的节点链接法利用直线或曲线链接各层次数据节点，能充分体现数据的层次和关联特性。但是伴随数据量的急剧增大，节点链接法的深度和广度快速增加，伴随而来的是节点布局困难，节点覆盖等问题。为有效概览层次数据整体结构，清晰展示层次信息，改善用户交互，本文借鉴DNA螺旋结构，将层次数据节点类比为碱基，将数据间层次关系曲线类比为磷酸骨架，拟以多层次的多螺旋结构来展示层次数据，提出一种名为MultipleHelix层次数据可视化布局算法。

二、相关工作

作为数据的重要组成部分，层次数据的可视分析与展示是数据可视化工作的重要议题之一。Lamping J等人提出双曲树（HyperbolicTree），它将更多的空间分给用户关注的部分分支。根节点在正中，子节点通过双曲平面布局，双曲平面的弧线长度随层次结构的深度增长而正比增长。Battista GD等人提出了徑向树（Radial Tree），它将不同层次的节点分配到不同半径的同心圆上，根节点在圆心处，节点到圆心距离是节点的深度。与此同时，学者也在不断探索层次数据的3D展示技术。Kreuseler M等人提出魔法眼（Magic Eye View），首次运用Walker布局算法将层次结构进行放射状布局，将平面布局结果中的节点从笛卡尔坐标系转换到半球面上，然后再将布局结果投影回半球对应的2D圆面上。轴环柱型树（Collapsible CylindricalTrees）将非根节点映射到可旋转的柱体表面，用户利用转动交互显示或隐藏节点。

1953年2月，沃森（ Watson）、克里克（Crick）通过维尔金斯看到了富兰克林（Rosalind Franklin）在1951年11月拍摄的一张十分漂亮的DNA晶体X射线衍射照片，激发了他们的灵感。他们分析出螺旋参数并提出了DNA螺旋结构。DNA是磷酸骨架与碱基对组成的双链结构，DNA双链在空间上是一个带状几何曲面。DNA双链可以围绕螺旋轴进行空间旋转，形成DNA螺旋结构如图l所示。

DNA分子由两条长链组成，这两条长链按反向平行方式盘旋成双螺旋结构。其中每条链上的一个核苷酸（也称碱基，有A、T、G、C四种）以脱氧核糖与另一个核苷酸上的磷酸基团结合，形成主链的基本骨架，并排列在主链的外侧，碱基位于主链内侧。两条DNA分子链上的核苷酸碱基总是互补配对的（A只和T配对，G只和C配对）。

三、MultipleHelix布局算法

MultipleHelix布局算法包含两大类布局：圆环布局和螺旋布局。

圆环布局，即从集合中取出第k层有序数据（数据个数记做n），以固定半径生成节点球体，按逆时针方向绘制到平面X=m（m为常数）上，如图3所示。因各节点球体球心X轴坐标固定，为简化布局计算，可将各节点球体投影到x=0平面。各节点球体球心在X=0平面上的投影，应满足某一圆形方程，将该圆记做A，如图4所示。若以过圆A圆心的直线与圆A相交的点P为起始位置，按逆时针均匀布局各节点，则对于任意节点Nodek而言，过其投影圆圆心和圆A圆心做一条直线l，该直线与X轴的夹角

。因此，任意几点

投影圆圆心的z坐标和Y坐标应满足方程组：

。

螺旋布局，即从集合S，中取出第k+l层有序数据，按节点Nodek.F，进行分组，即按父节点是否相同进行分组。取出每组数据，以父节点元素起始位置为参照，按圆环布局的同时，沿X轴正向有△x的增量，如图5所示。设父节点的坐标为（x0，y0，z0），则对于任意子节点Nodex而言，其坐标满足以下方程组：

2算法描述

MultipleHelix布局算法首先将输入节点按主次关键字排序，然后对奇数层数据做圆环布局，对偶数层数据做螺旋布局。详尽描述如下：

MultipleHelix（S，n）

输入：层次数据节点集合

，n为数据层数。

A.将输入节点集合s按主次关键字排序，得到行列有序的集合Sr。

B.令i从1到n依次取值：

如果l等于1，靠屏幕左边平行于YOZ平面做圆环布局。

否则，判定i的奇偶性。如果i为奇数，以Node，Fj节点球体球心为中心，做圆环布局，否则以Node，，Fj节点球体球心为起始位置做螺旋布局。

四、网络课程层次数据的可视化展示

将MultipleHelix方法应用于网络课程层次数据，以帮助师生分析课程的层次结构，包括章节的直接关系，以及章节间的先行 后续的间接关系。

首先，对章数据进行圆环布局，用不同颜色代表不同章节。其实，提取节数据，对其进行螺旋布局，用父节点章数据的颜色渲染节数据。最后，对章数据间、节数据间、章 节数据间进行连线。本文采用three.js进行三维建模，利用web平台展示相应数据，如图6所示。图中A区为传统章节导航目录，B区为层次数据MultipleHelix布局效果，C区为参数面板，D区为选中节点信息，E区为图例。

本可视平台的可视交互信息输入方式有：导航点击、参数面板修改和用户选择和旋转。用户点击A区导航项，B区相应节点高亮、直接间接连线，C区显示该节点属性，D区显示该选中节点信息。如图5-A所示，为选择导航菜单的13.3节B区效果图。参数面板可调节指定数据节点的半径、颜色等信息。用户选择交互输入，同点击A区导航项效果相同，只是数据输入方式不同。因为本可视化平台采用的是3D展示方式，存在一定的遮挡。为避免这一问题带来的影响，本系统引进了旋转操作。用户点击鼠标左键不放，即可对层次数据进行旋转。如图7所示，为MultipleHelix模型旋转后的几个经典视角效果图。

五、典型方法对比分析

由于层次可视化技术在层次结构数据的分析与展现上良好的性能，它已然成为人们分析和驾驭层次信息的有力工具。层次数据可视化并不是简单地对层次结构进行图形展示，而是优美且客观的展示层次结构和信息。对于层次可视化技术没有公认的衡量标准，参考大量有关层次可视化评价文献，认为层次可视化技术的设计目标主要应包含如下几个方面：

1）可视化结果在适当位置显示，能清晰展示层次结构;

2）合理显示用户关心的属性，易于详细观察细节信息;

3）拥有良好人机交互，浏览过程中保持上下文信息，有效防止迷航;

4）经常使用能轻松在可视化结果的任何区域找到针对任务的特定信息，可视化结果具有一致性。

本文MultipleHelix可视化方法，为借鉴DNA组织结构的3D节点链接层次化可视技术。常用的3D节点链接层次化可视技术有：圆锤树、魔法眼、轴环柱型树。针对上述设计目标，结合文献[2]中的分析，MultipleHelix可视化方法与上述三种方法的比较如表1所示。

六、结语

本文借鉴DNA组织结构，提出一种3D的层次数据可视化方法，该方法能清晰展示数据层次结构，人机交互良好，拥有不错的层次数据展示效果。未来在MultipleHelix布局中将针对关系边应用边绑定技术和渲染技术进行边优化，或寻求更好的边展现方式，减少视觉。在数据组织方面，可借鉴DNA的半保留复制、DNA重组等生物特性。本文可视化方法还可应用于教育、金融、食品等多个领域，对具有间接关系的层次数据进行可视化和可视分析。

参考文献

[1]Lampingj， RaoR， PirolliP.A focus+context technique baseri onhyperbolic geometry forvisualizing large hierarchies[C] .In：Proc.of the SIGCHI Conferenceon Human Factorsin Computing Systems，Denver， ACMPress， 40L-408.

[2]BattistaGD， EadesP， TanrassiaR， etal. Graph drawing： algorithmsfor the visualization of graphs[ M] .UpperSaddleRiver：PrenticeHall，1998

[3] Kreuseler M， LopezN， SchumannH.Ascalable frameworkfor information visualization[C].In：Proc.of IEEE SymposiumonInformation Visualization， InfoVis，SaltLakeCity， IEEEComputerSociety， 2000， 27-36.

[4]DachseltR， Ebertj.Collapsible cylindrical trees：a fast hierarchicalnavigation technique[c].In：Proc.ofIEEE Symposiumon InformlationVisualization， InfoVis， SanDiego， IEEEComputerSo-ciety， 2001，79-86

[5]Wang Ying，Shi Xuguang. Study on the Relationship betweenDNA Free Energy and DNA Space Geometry[J]. Journal of Bionrathematics，2017，32（4）：483-49L （in Chinese）（王穎，史旭光.DNA自由能与DNA空间几何构型关系研究.生物数学学报.2017，32（4）：483-491）

[6]陈颖.一种基于DNA双螺旋结构的数据起源模型，现代图书情报技术.2008-10：11-15