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