秦錦玉，翟潔，陳程，趙維杰，蔡婷婷，武海霞

（華東理工大學(xué)信息科學(xué)與工程學(xué)院，上海200237）

眾所周知，中醫(yī)是中國(guó)古代醫(yī)者同大量未知疾病斗爭(zhēng)所得的經(jīng)驗(yàn)，經(jīng)歷持久的醫(yī)學(xué)實(shí)踐逐步形成和發(fā)展醫(yī)學(xué)理論體系。其中，中醫(yī)藥的研究和發(fā)展是中醫(yī)理論必不可少且相當(dāng)重要的一部分。但由于國(guó)外對(duì)中醫(yī)藥學(xué)的無人問津，國(guó)內(nèi)知識(shí)圖譜的發(fā)展還不夠面面俱到，導(dǎo)致中醫(yī)藥的知識(shí)網(wǎng)絡(luò)相對(duì)零散，更多的以文字作為載體的呈現(xiàn)形式，以靜態(tài)的圖形來表述關(guān)聯(lián)性，缺乏一定的交互性，也致使了大多數(shù)非相關(guān)人員很難接觸和了解這門學(xué)科，甚至從事者也難以在大量的文獻(xiàn)和文字資源中高效的獲取所需求的知識(shí)。

針對(duì)以上問題，設(shè)計(jì)了關(guān)于中醫(yī)藥知識(shí)圖譜的可視化系統(tǒng)，對(duì)中藥數(shù)據(jù)采集后進(jìn)行清理和分類，提供一個(gè)所想即所得的方式，以“圖”的方式提供一種引導(dǎo)性學(xué)習(xí)，將大量的中醫(yī)藥知識(shí)之間的關(guān)聯(lián)以簡(jiǎn)單的圖譜形式展示，可視化效果好。

1 可視化的流程

中醫(yī)藥知識(shí)圖譜的可視化流程如下所述：

1）層析結(jié)構(gòu)設(shè)計(jì)

對(duì)展示的數(shù)據(jù)內(nèi)容進(jìn)行層次結(jié)構(gòu)分析，確定上下位關(guān)系、數(shù)據(jù)模型和圖模型。

2）節(jié)點(diǎn)生成

對(duì)主頁(yè)面、分類頁(yè)和詳情頁(yè)根據(jù)其節(jié)點(diǎn)特點(diǎn)，設(shè)計(jì)不同的節(jié)點(diǎn)生成算法，獲得相應(yīng)的節(jié)點(diǎn)和連線信息。

3）html頁(yè)面生成

節(jié)點(diǎn)和連線準(zhǔn)備好之后，需要將其轉(zhuǎn)換為圖形。本文設(shè)計(jì)了html頁(yè)面生成算法，將節(jié)點(diǎn)和連線信息寫入html頁(yè)中。

4）力導(dǎo)引布局

以上步驟生成的知識(shí)圖譜整體平衡，但存在很多交叉點(diǎn)，很不美觀。我們可以利用KK算法來優(yōu)化節(jié)點(diǎn)布局，減少交叉點(diǎn)的數(shù)量。流程圖如圖1所示。

圖1 中醫(yī)藥知識(shí)圖譜的可視化流程圖

2 技術(shù)實(shí)現(xiàn)

2.1 層次結(jié)構(gòu)設(shè)計(jì)

領(lǐng)域內(nèi)的層次結(jié)構(gòu)直觀反應(yīng)了領(lǐng)域內(nèi)知識(shí)的上下位關(guān)系，為實(shí)現(xiàn)中藥知識(shí)圖譜可視化，首先要建立中藥層次結(jié)構(gòu)圖。

在中藥領(lǐng)域中，存在著很多上下位關(guān)系。本文中，采用藥性、藥味、歸經(jīng)等等作為中藥知識(shí)的下層知識(shí)。藥性、藥味、歸經(jīng)又有各自包含的子概念，形成了具體的上下位關(guān)系，即是層次結(jié)構(gòu)。

另外，考慮到有多處的一對(duì)多及多對(duì)一關(guān)系，數(shù)據(jù)模型選擇不完全連接網(wǎng)狀結(jié)構(gòu)，因包含關(guān)系的單向性，圖模型選擇有向圖。

綜上，圖譜設(shè)計(jì)規(guī)則為：上位元素作為起始節(jié)點(diǎn)，下位元素作為終止節(jié)點(diǎn)。

2.2 節(jié)點(diǎn)生成算法分析

生成知識(shí)圖譜節(jié)點(diǎn)，便是將數(shù)據(jù)圖形化，因而數(shù)據(jù)的提取、合并就成了重中之重。文中，設(shè)計(jì)了適合這個(gè)中醫(yī)藥知識(shí)圖譜各種特性的節(jié)點(diǎn)及連線生成算法。

2.2.1 主頁(yè)面及分類頁(yè)節(jié)點(diǎn)生成算法

為形成清晰美觀而又實(shí)用的主頁(yè)面及分類頁(yè)，采用排序算法及隨機(jī)數(shù)生成算法，將點(diǎn)擊率較高和另一些隨機(jī)的中藥節(jié)點(diǎn)呈現(xiàn)出來，總數(shù)不多于20。圖2為主頁(yè)圖和分類節(jié)點(diǎn)圖的生成流程。

圖2 主頁(yè)圖和分類節(jié)點(diǎn)圖的生成流程

具體思想是：

1）實(shí)例化自定義類Edges，其中包括屬性source（起點(diǎn)），target（終點(diǎn)），weight（線段粗細(xì)）。

2）使用sql語(yǔ)句搜索得到所有具備當(dāng)前屬性的節(jié)點(diǎn)，并以主表中的點(diǎn)擊率字段從高到低排列。

3）判斷所有節(jié)點(diǎn)數(shù)是否大于20，若不大于則全部添加進(jìn)節(jié)點(diǎn)列表，并添加所有連線。

4）若節(jié)點(diǎn)數(shù)大于20，先添加點(diǎn)擊率最高的10個(gè)節(jié)點(diǎn)進(jìn)節(jié)點(diǎn)列表，并在剩余節(jié)點(diǎn)中調(diào)用隨機(jī)函數(shù)生成10個(gè)節(jié)點(diǎn)

5）隨機(jī)函數(shù)原理則是生成10個(gè)0到n-10的節(jié)點(diǎn)（n為所有節(jié)點(diǎn)總數(shù)），得到隨機(jī)數(shù)后+10則是所需節(jié)點(diǎn)的下標(biāo)。

6）添加所有連線，起點(diǎn)均是中間屬性節(jié)點(diǎn)，而終點(diǎn)則是節(jié)點(diǎn)列表中的節(jié)點(diǎn)，遍歷添加即可。

2.2.2 詳細(xì)頁(yè)節(jié)點(diǎn)生成算法

詳細(xì)頁(yè)的節(jié)點(diǎn)需要二次查重，節(jié)點(diǎn)省略，還需要對(duì)連線進(jìn)行合理分配起點(diǎn)終點(diǎn)。具體流程如下：

1）使用sql語(yǔ)句搜索得到當(dāng)前中藥所有分類總數(shù)，并將當(dāng)前中藥作為0號(hào)節(jié)點(diǎn)添加至節(jié)點(diǎn)列表。

2）記錄所有分類節(jié)點(diǎn)數(shù)量parentNodes。

3）對(duì)每個(gè)分類節(jié)點(diǎn)再進(jìn)行一次搜索，使用sql語(yǔ)句找到當(dāng)前分類的中藥，當(dāng)搜索結(jié)果數(shù)量小于5時(shí)，全部添加，大于等于5時(shí)，添加點(diǎn)擊率最高的4個(gè)節(jié)點(diǎn)，再添加一個(gè)“…”節(jié)點(diǎn)，表示有其他未添加的節(jié)點(diǎn)。

4）當(dāng)添加節(jié)點(diǎn)時(shí)，某些子節(jié)點(diǎn)會(huì)和父節(jié)點(diǎn)具有多個(gè)相同分類，相同節(jié)點(diǎn)不應(yīng)多次添加，即需要查重。則每次添加節(jié)點(diǎn)時(shí)必須對(duì)已有的節(jié)點(diǎn)列表進(jìn)行遍歷檢查是否存在，若存在則只添加新的連線，而連線的起點(diǎn)則設(shè)置為遍歷過程中，搜到重復(fù)節(jié)點(diǎn)的下標(biāo)。

5）當(dāng)節(jié)點(diǎn)和連線列表填充完畢后，再次記錄節(jié)點(diǎn)列表的總節(jié)點(diǎn)數(shù)，目的是得到所有的子節(jié)點(diǎn)數(shù)量記作childNodes，在之后的知識(shí)圖譜生成過程中，parentNodes和childNodes將作為重要參數(shù)。

詳細(xì)頁(yè)節(jié)點(diǎn)生成算法流程如圖3所示。

詳情頁(yè)的節(jié)點(diǎn)生成比主頁(yè)面和分類頁(yè)更復(fù)雜，分類頁(yè)的生成圖的重點(diǎn)在于判斷總節(jié)點(diǎn)數(shù)后對(duì)于節(jié)點(diǎn)的選擇，而詳情頁(yè)則是在節(jié)點(diǎn)獲取時(shí)的判斷數(shù)量，是否添加，起點(diǎn)和終點(diǎn)的節(jié)點(diǎn)下標(biāo)，以及分別記錄節(jié)點(diǎn)數(shù)量。

2.3 html頁(yè)組成算法分析

通過節(jié)點(diǎn)生成算法準(zhǔn)備好節(jié)點(diǎn)和線后，需要將這些節(jié)點(diǎn)和線數(shù)據(jù)轉(zhuǎn)換成圖形。這要由D3.js這一類庫(kù)完成，腳本語(yǔ)言需要嵌套在html頁(yè)中展示，作為WPF設(shè)計(jì)界面，又可以通過瀏覽器控件訪問html頁(yè)。具體流程如下：

1）以流的方式讀入html模板頁(yè)，模板頁(yè)為html語(yǔ)言編寫，其中所需要的json格式數(shù)據(jù)源以及其他需要通過后臺(tái)傳入的參數(shù)，用字符串代替。

2）將用節(jié)點(diǎn)生成算法獲取的節(jié)點(diǎn)和連線列表用string拼寫成 json 格式{key：value，key：value，key，value…}。

3）替換json數(shù)據(jù)源，替換重要參數(shù)parentNodes。

4）流的方式寫成html文件，并以當(dāng)前藥名/分類名命名。

之后，需要對(duì)其中的部分參數(shù)進(jìn)行修改來達(dá)到系統(tǒng)最美觀的程度，同時(shí)增加部分事件來體現(xiàn)交互性，而KK算法已經(jīng)由D3.js中的force方法實(shí)現(xiàn)，調(diào)用force方法后，修改參數(shù)的值，會(huì)得到不同的界面效果。

2.4 力導(dǎo)引布局

據(jù)圖4可以看出，單單的平衡可以采用圓面的布局方式，盡可能的使節(jié)點(diǎn)出現(xiàn)在某半徑的圓周上。整體圖形很平衡，但明顯會(huì)有大量的交叉線在內(nèi)部產(chǎn)生。極大的影響了圖的可閱讀性和美觀程度。

力導(dǎo)引布局的方法可以產(chǎn)生相當(dāng)優(yōu)美的網(wǎng)絡(luò)布局，并充分展現(xiàn)網(wǎng)絡(luò)的整體結(jié)構(gòu)及其自同構(gòu)特征。該方法最早由Eades在1984年提出。其基本思想是將網(wǎng)絡(luò)看成一個(gè)頂點(diǎn)為鋼環(huán)，邊為彈簧的物理系統(tǒng)，系統(tǒng)被賦予某個(gè)初始狀態(tài)以后，彈簧彈力（引力和斥力）的作用會(huì)導(dǎo)致鋼環(huán)移動(dòng)，這種運(yùn)動(dòng)直到系統(tǒng)總能量減少到最小值停止。

Kamada和Kawai改進(jìn)了Eades的彈簧模型，提出KK算法。

圖4 未使用力導(dǎo)引布局的圖

2.4.1 KK算法

D3.js中的force方法提供了KK算法的基本實(shí)現(xiàn)，由虎克（Hooke）定律，單個(gè)彈簧的能量E為：

其中：k是彈簧的彈力常數(shù)，x是從未拉伸的長(zhǎng)度起的位移。KK算法中的能量寫作：

其中：pv是節(jié)點(diǎn)v的位置向量，kuv是彈力常數(shù)，luv是節(jié)點(diǎn)v和節(jié)點(diǎn)u之間理想的彈簧長(zhǎng)度。假定在式（2）中，為了使所有的彈力模型只計(jì)算一次，那么必須使所有的節(jié)點(diǎn)以有序?qū)Φ男问匠霈F(xiàn)。模型的力基于kuv和luv值的選擇。彈簧未拉伸的長(zhǎng)度定義為：

其中：L是單個(gè)邊的理想長(zhǎng)度。d（u，v）是節(jié)點(diǎn)v和節(jié)點(diǎn)u之間在圖中對(duì)應(yīng)的距離長(zhǎng)度，和節(jié)點(diǎn)之間相隔的邊有關(guān)，即從節(jié)點(diǎn)u到節(jié)點(diǎn)v所經(jīng)過的邊數(shù)。對(duì)L可用兩種方法定義。一種方法是：

其中：W和H是顯示區(qū)域的寬和高，|V|是圖中節(jié)點(diǎn)的個(gè)數(shù)，本質(zhì)則是通過最終面積來確定節(jié)點(diǎn)之間的最佳長(zhǎng)度。另一種方法是：

式中：Lo是顯示顯示區(qū)域的一條邊的邊長(zhǎng)，diam（G）是圖G的直徑（即相距最長(zhǎng)距離節(jié)點(diǎn)對(duì)之間邊數(shù)）

這種方法稱為用圖的直徑定義理想邊長(zhǎng)。對(duì)于不同的應(yīng)用，可以用其他方法定義L。彈力常數(shù)kuv定義為：

其中：K是一個(gè)任意的常數(shù)。顯然用（3）和（7）代入到（2）中，得：

2.4.2 KK算法使用

算法本身由腳本文件直接生成，即組成html頁(yè)時(shí)可以直接將節(jié)點(diǎn)和連線生成，但若要根據(jù)實(shí)際情況更優(yōu)化的顯示圖譜，仍需要對(duì)參數(shù)進(jìn)行修改和調(diào)試，其中l(wèi)inkDistance即為KK算法中l(wèi)uv，charge則是KK算法中的kuv。

圖5 l=600，k=-800

圖6 l=1 000，k=-800

圖7 l=600，k=-1 200

通過圖5，6，7 3張圖的比較，不難發(fā)現(xiàn)，kuv對(duì)于圖最終的布局影響并不大，主要體現(xiàn)在了圖生成過程中的速度，以及個(gè)邊不相鄰節(jié)點(diǎn)之間的距離，圖7中個(gè)別節(jié)點(diǎn)的距離比圖5中的距離大。而luv對(duì)最終圖的影響比較大，如圖6，當(dāng)luv=1 000時(shí)，明顯可以看到節(jié)點(diǎn)連線的夾角變大，整體圖的效果比luv=600時(shí)顯得松散。這和節(jié)點(diǎn)的數(shù)量本身有關(guān)，因此根據(jù)實(shí)際需要，節(jié)點(diǎn)總數(shù)量，子節(jié)點(diǎn)數(shù)量的各方面因素決定此處選擇luv=600，kuv=-800。

3 結(jié)果演示

基于以上技術(shù)的分析，本文通過visual studio建立了一個(gè)wpf項(xiàng)目。在系統(tǒng)搜索欄中搜索某種中藥名，窗體左側(cè)便呈現(xiàn)以該中藥為中心節(jié)點(diǎn)的知識(shí)圖譜。通過知識(shí)圖譜，可以清楚了解該中藥的性、味、歸經(jīng)情況，還可以找到與該中藥有相似處甚至可替換的其他中藥。從效果圖圖8中可以看出，利用KK算法調(diào)整后的圖整體布局平衡，交叉點(diǎn)少。

4 結(jié)束語(yǔ)

本文研究了中醫(yī)藥知識(shí)圖譜可視化的相關(guān)技術(shù)，主要包括層析結(jié)構(gòu)設(shè)計(jì)、節(jié)點(diǎn)生成、html頁(yè)面生成和力導(dǎo)引布局4個(gè)部分，以此為基礎(chǔ)，最終將網(wǎng)絡(luò)上、書本上零散抽象的中醫(yī)藥知識(shí)進(jìn)行整合、分類，并實(shí)現(xiàn)了一個(gè)高交互性的可視化系統(tǒng)。該系統(tǒng)為用戶提供全面、及時(shí)、可靠的知識(shí)服務(wù)，也為中醫(yī)藥知識(shí)圖譜的進(jìn)一步發(fā)展提供了一些參考。

圖8 結(jié)果展示