本發(fā)明涉及在線教育技術(shù)領(lǐng)域,具體涉及一種基于HTML5的節(jié)點關(guān)系圖的顯示方法及系統(tǒng).

背景技術(shù)：

隨著互聯(lián)網(wǎng)的迅速發(fā)展以及海量數(shù)據(jù)的快速出現(xiàn),為海量數(shù)據(jù)提供一種高效、直觀的可視化方法變得越來越重要.對于在線教育領(lǐng)域,以提高學(xué)習(xí)效率和學(xué)習(xí)路徑導(dǎo)航為目的的知識地圖如何繪制成為一個亟待解決的問題.目前,很多平臺都提供了基于web的圖形數(shù)據(jù)可視化技術(shù).如Adobe公司的flash,Mcrosoft的Sliverlight都提供了基于web的圖形繪制技術(shù),但他們都需要客戶端瀏覽器安裝相應(yīng)插件才能正常顯示.另外,sun公司的JavaApplet平臺也提供了基于web的圖形繪制技術(shù),但同樣要求用戶電腦上安裝了JRE才能正常運行.由于需要用戶客戶端安裝額外的插件才能正常顯示繪制的圖形,因此基于上述這些平臺的圖形數(shù)據(jù)可視化技術(shù)發(fā)展較為緩慢.

w3c組織推出的新一代HTML5標(biāo)準(zhǔn)的宗旨在于消除或降低腳本的復(fù)雜性，提供之前版本需要插件才能實現(xiàn)的功能,其中用于繪畫的Canvas元素為網(wǎng)頁繪圖及圖像處理帶來了很大的便利.目前主流的瀏覽器如IE9,Firefox,chrome,Safari等都完成了對HTML5標(biāo)準(zhǔn)的支持.因此,基于新一代HTML5標(biāo)準(zhǔn)、Ajax和Web Service技術(shù)使得不使用任何插件便能在客戶端的瀏覽器上繪制圖形成為可能.

技術(shù)實現(xiàn)要素：

本發(fā)明克服了需用客戶端安裝瀏覽器插件才能實現(xiàn)基于web的圖形繪制的缺陷,提供了一種基于HTML5的節(jié)點關(guān)系圖的顯示方法及系統(tǒng),能夠高效、清晰地將節(jié)點關(guān)系圖顯示在網(wǎng)頁上.

同時,由于使用了開源JavaScript腳本庫arbor.js來對節(jié)點進(jìn)行布局,有效地避免了因為節(jié)點連接線的之間交叉過多而使圖形雜亂難于分析.另外,本發(fā)明使用鼠標(biāo)事件處理模塊對圖形元素進(jìn)行處理,節(jié)點關(guān)系圖中的各種不同元素均能夠響應(yīng)鼠標(biāo)的不同事件,這與傳統(tǒng)整個圖形響應(yīng)鼠標(biāo)事件大不相同.

為了實現(xiàn)本發(fā)明的上述目的,本發(fā)明提供了一種基于HMTL5的節(jié)點關(guān)系圖的顯示方法,其包括如下步驟:

S1:由用戶輸入或web服務(wù)器后臺傳入json格式的圖形數(shù)據(jù)

S2:使用解析器解析圖形數(shù)據(jù)并臨時存儲

S3:利用圖形繪制模塊創(chuàng)建空白畫布

S4:根據(jù)解析過的圖形數(shù)據(jù)使用圖形繪制模塊繪制相應(yīng)的節(jié)點和節(jié)點連線

S5:利用圖形元素事件處理模塊為圖形元素設(shè)置相應(yīng)的鼠標(biāo)事件響應(yīng)程序

S6:將繪制好的圖形輸出并顯示在html頁面上

本發(fā)明基于HTML5的節(jié)點關(guān)系圖的顯示方法利用HTML5繪制圖形的新特性和開源JavaScript庫arbor.js,提出了一種簡單有效的HTML5+JavaScript+json數(shù)據(jù)解析技術(shù)可以快速并穩(wěn)定的在網(wǎng)頁上顯示節(jié)點關(guān)系圖.

為了實現(xiàn)本發(fā)明的上述目的,根據(jù)本發(fā)明的第一個方面,本發(fā)明提供了一種節(jié)點關(guān)系圖顯示系統(tǒng),其包括數(shù)據(jù)輸入模塊,解析器,圖形繪制模塊,圖形元素鼠標(biāo)事件處理模塊以及圖形輸出模塊；所述數(shù)據(jù)輸入模塊用于獲取用于顯示節(jié)點關(guān)系圖的圖形數(shù)據(jù),格式為json格式,可以由用戶直接輸入并由JavaScript腳本轉(zhuǎn)換為json,也可以由網(wǎng)站服務(wù)器后臺直接返回json格式的圖形數(shù)據(jù)；所述解析器用于把數(shù)據(jù)輸入模塊得到的json格式圖形數(shù)據(jù)解析為JavaScript腳本可以識別的節(jié)點以及節(jié)點之間的聯(lián)系；所述圖形繪制模塊根據(jù)解析過的圖形數(shù)據(jù)繪制和arbor.js庫繪制出相應(yīng)的節(jié)點以及節(jié)點連接線；所述圖形元素鼠標(biāo)事件處理模塊根據(jù)已經(jīng)繪制出的節(jié)點和節(jié)點連接線設(shè)置相應(yīng)的圖形元素鼠標(biāo)事件相應(yīng)程序；圖形輸出模塊用于將繪制完畢的節(jié)點關(guān)系圖輸出到html頁面上.

本發(fā)明的有益效果主要表現(xiàn)在:

1)本發(fā)明使用了開源JavaScript腳本庫arbor.js對圖形中的節(jié)點進(jìn)行布局,該布局算法可以根據(jù)節(jié)點的密度動態(tài)調(diào)節(jié)節(jié)點的位置以規(guī)避節(jié)點連接線之間的交叉,使節(jié)點關(guān)系圖更有效地表現(xiàn)出節(jié)點之間的關(guān)系.當(dāng)節(jié)點較多時,不至于圖形的節(jié)點連接線交叉過多而雜亂.

2)本發(fā)明通過鼠標(biāo)事件處理模塊對節(jié)點關(guān)系圖中的各種圖形元素(包括節(jié)點,節(jié)點連接線以及節(jié)點連接線上的標(biāo)簽)設(shè)置不同的鼠標(biāo)事件響應(yīng)程序,而傳統(tǒng)web頁面上的圖形只能在整個圖形范圍內(nèi)響應(yīng)鼠標(biāo)事件.

3)本發(fā)明使用HTML5的新特性<canvas>標(biāo)簽來繪制節(jié)點關(guān)系圖,不需要客戶機(jī)瀏覽器安裝任何插件就可以正常顯示.

附圖說明

圖1是本發(fā)明一種基于HTML5的節(jié)點關(guān)系圖顯示方法及系統(tǒng)的一種實施例的結(jié)構(gòu)示意圖；

圖2是本發(fā)明一種基于HTML5的節(jié)點關(guān)系圖顯示方法及系統(tǒng)的一種實施例的流程圖.

具體實施方式

下面對本發(fā)明作進(jìn)一步闡述.

下面將會詳細(xì)闡述本發(fā)明的實施過程,所述示例將會在圖示中示出,其中始終相同的元件或模塊名稱標(biāo)示具有相同功能的元件.下面以附圖描述的實施過程只是示例性的,僅用于解釋和闡述本發(fā)明,不應(yīng)理解為對本發(fā)明的限制.

如圖1所示,本發(fā)明提供了一種節(jié)點關(guān)系圖顯示系統(tǒng),該系統(tǒng)包括數(shù)據(jù)輸入模塊,解析器,圖形繪制模塊,輸出模塊,圖形元素事件處理模塊和圖形輸出模塊.其中,數(shù)據(jù)輸入模塊用于接收由用戶輸入或者web服務(wù)器后臺返回的圖形數(shù)據(jù),數(shù)據(jù)格式為json數(shù)據(jù).解析器用于把數(shù)據(jù)輸入模塊得到的json格式圖形數(shù)據(jù)解析為JavaScript腳本可以識別的節(jié)點以及節(jié)點之間的聯(lián)系；所述圖形繪制模塊根據(jù)解析過的圖形數(shù)據(jù)繪制和arbor.js庫繪制出相應(yīng)的節(jié)點以及節(jié)點連接線；所述圖形元素鼠標(biāo)事件處理模塊根據(jù)已經(jīng)繪制出的節(jié)點和節(jié)點連接線設(shè)置相應(yīng)的圖形元素鼠標(biāo)事件相應(yīng)程序；圖形輸出模塊用于將繪制完畢的節(jié)點關(guān)系圖輸出到html頁面上.

本發(fā)明還提供了一種基于HTML5的節(jié)點關(guān)系圖的顯示方法,其包括如下步驟:

第一步:由用戶輸入或web服務(wù)器后臺傳入json格式的圖形數(shù)據(jù).在本實施方式中,若采用用戶輸入的方式來獲取節(jié)點關(guān)系圖的圖形數(shù)據(jù),則在前端html頁面上提供相應(yīng)的輸入控件,包括文本框<text>和添加點與邊的按鈕<input>.每次用戶提交一次添加節(jié)點或邊的操作時,則圖形繪制模塊根據(jù)arbor.js庫的節(jié)點布局算法自動改變現(xiàn)有節(jié)點的位置,并繪制出新的節(jié)點或節(jié)點連接線.若采用后一種數(shù)據(jù)輸入方式,JavaScript使用異步請求技術(shù)AJAX發(fā)送獲取圖形數(shù)據(jù)的請求,web服務(wù)器后臺的動態(tài)頁面(php,py,asp等腳本語言)通過查詢數(shù)據(jù)庫得到請求的圖形數(shù)據(jù),將查詢結(jié)果(包含了節(jié)點關(guān)系圖的節(jié)點以及節(jié)點關(guān)系等數(shù)據(jù))生成相應(yīng)的json格式數(shù)據(jù)返回給前臺的JavaScript腳本程序.以下為用于描述節(jié)點關(guān)系圖的json數(shù)據(jù)示例:

該json數(shù)據(jù)表示兩個節(jié)點”節(jié)點1”和”節(jié)點2”,其中有一條連接線由”節(jié)點1”指向”節(jié)點2”.對于”data”鍵的內(nèi)容可以根據(jù)圖形的需要自定義添加,本例添加了對于節(jié)點的描述以及詳細(xì)描述,同時添加了相關(guān)鏈接,以便實現(xiàn)頁面跳轉(zhuǎn).

第二步:使用解析器解析圖形數(shù)據(jù)并臨時存儲.在本實施方式中,所述解析器主要由JavaScript腳本程序構(gòu)成.由于JavaScript程序能夠使用內(nèi)建的eval()函數(shù)來解析JSON格式的數(shù)據(jù)，并用JSON數(shù)據(jù)來生成原生的JavaScript對象,因此使用json格式的圖形數(shù)據(jù)給圖形繪制帶來了極大的便利.

所述解析器通過第一次遍歷JSON格式的圖形數(shù)據(jù),得到所有節(jié)點的相關(guān)信息,所述節(jié)點相關(guān)信息包括節(jié)點名稱以及擴(kuò)展data(第一步所述的data值)數(shù)據(jù),并使用相應(yīng)的結(jié)構(gòu)把節(jié)點關(guān)系圖的節(jié)點信息臨時存儲起來.所述結(jié)構(gòu)可以為數(shù)組也可以為自定義的對象,它存儲了節(jié)點關(guān)系圖的所有節(jié)點的相關(guān)信息,但不包含節(jié)點關(guān)系信息.

所述解析器通過第二次遍歷JSON格式的圖形數(shù)據(jù),此次遍歷同樣會使用相應(yīng)的結(jié)構(gòu)臨時存儲節(jié)點關(guān)系圖中所有節(jié)點關(guān)系信息.所述節(jié)點關(guān)系信息包括目的節(jié)點名稱,即節(jié)點連接線的起始位置(第一步示例中的from值)以及擴(kuò)展數(shù)據(jù).

通過所述解析器對JSON格式的圖形數(shù)據(jù)的兩次解析,得到了符合javascript腳本語言語法的數(shù)據(jù)結(jié)構(gòu),這兩種結(jié)構(gòu)分別包含了節(jié)點關(guān)系圖的節(jié)點信息以及節(jié)點關(guān)系信息.

第三步:利用圖形繪制模塊創(chuàng)建空白畫布.在本實施方式中,所述圖形繪制模塊主要包括兩部分,第一部分為靜態(tài)HTML頁面中的<div>標(biāo)簽,第二部分為javascript腳本程序中圖形處理程序.

所述<div>標(biāo)簽是HTML語法中的塊級元素，它是可用于組合其他HTML元素的容器.在本發(fā)明中包含了一個<canvas id＝“diagram”>標(biāo)簽,Canvas對象表示一個HTML畫布元素,它沒有自己的行為，但是定義了一個API支持javascript腳本化客戶端繪圖操作.通過引入<canvas>標(biāo)簽,第二部分的javascript腳本程序可以通過id為”diagram”來識別出該標(biāo)簽,并以該<canvas>為畫面來繪制圖形.此后,所有javascript腳本程序的繪制過程都是以此畫布為基礎(chǔ)來繪制的.

第四步:根據(jù)解析過的圖形數(shù)據(jù)使用圖形繪制模塊繪制相應(yīng)的節(jié)點和節(jié)點連線.在本發(fā)明中,使用開源的javascript庫來實現(xiàn)圖形中節(jié)點位置的分布,它提供了高效的，力導(dǎo)向布局算法，圖形組織抽象和屏幕重繪處理等功能，是一個基于jquery和Web多線程技術(shù)的可視化Javascript圖形庫.因此,它可以有效的避免因節(jié)點過多時而造成的連接線相互交叉,或是節(jié)點重合.

所述節(jié)點的繪制是指重寫arbor.js庫的eachNode方法,根據(jù)節(jié)點的相關(guān)信息來設(shè)計節(jié)點的繪制方法.在本實施方式中,節(jié)點的繪制方法為:

1.從臨時存儲的圖形數(shù)據(jù)中讀取節(jié)點的填充樣式

2.通過canvas fillStyle屬性設(shè)置節(jié)點的填充樣式

3.從臨時存儲的圖形數(shù)據(jù)中讀取節(jié)點顯示名稱；

4.根據(jù)節(jié)點顯示名稱的字符長度以及字體大小,計算出節(jié)點的寬度和高度；

5.使用canvas rect()方法繪制矩形節(jié)點,矩形的寬度和高度為第4步的計算結(jié)果；

6.從臨時存儲的圖形數(shù)據(jù)中讀取節(jié)點顯示名稱的字體,包括字體樣式；

7.通過canvas fillStyle屬性設(shè)置節(jié)點顯示名稱的字體樣式

8.使用canvas fillText()方法來繪制節(jié)點顯示名稱；

9.使用結(jié)構(gòu)nodeBoxes存儲節(jié)點信息,包括節(jié)點名稱,節(jié)點中心坐標(biāo)以及節(jié)點長度與寬度.

所述節(jié)點連接線的繪制是指重寫arbor.js庫的eachEdge方法,根據(jù)節(jié)點關(guān)系的相關(guān)信息來繪制節(jié)點連接線.在本實施方式中,節(jié)點連接線的繪制方法為:

1.使用arbor.js庫的intersect_line_box()方法來計算起點和終點的坐標(biāo)；

2.從臨時存儲的圖形數(shù)據(jù)中讀取節(jié)點連接線的顏色；

3.通過canvas fillStyle屬性設(shè)置節(jié)點連接線的顏色；

4.根據(jù)第10步的計算結(jié)果使用canvas moveTo()方法和lineTo()方法繪制節(jié)點連接線；

5.使用結(jié)構(gòu)edgeBoxes存儲節(jié)點連接線信息,包括節(jié)點連接線的起始節(jié)點,目的節(jié)點以及節(jié)點連接線注釋；

6.判斷節(jié)點連接是否存在連接線注釋.若存在,則轉(zhuǎn)到第15步；否則直接跳轉(zhuǎn)到第19步.

7.從臨時存儲的圖形數(shù)據(jù)中獲取連接線注釋的字體樣式；

8.通過canvas fillStyle屬性設(shè)置節(jié)點連接線的字體樣式；

9.用canvas fillText()方法來繪制節(jié)點連接線注釋；

10.判斷節(jié)點連接線是否為有向連接,若是有向連接則轉(zhuǎn)到下一步；否則直接跳轉(zhuǎn)到最后；

11.從臨時存儲的圖形數(shù)據(jù)中獲取箭頭樣式；

12.通過canvas fillStyle屬性設(shè)置箭頭樣式；

13.繪制箭頭.

第五步:利用圖形元素事件處理模塊為圖形元素設(shè)置相應(yīng)的鼠標(biāo)事件響應(yīng)程序.在本實施方式中,所述圖形元素事件處理模塊以及鼠標(biāo)事件響應(yīng)程序均為javascript腳本程序.所述圖形元素鼠標(biāo)事件的設(shè)置方法為重寫arbor.js庫的initMouseHandling方法.此外,還需要編寫程序?qū)崿F(xiàn)判斷鼠標(biāo)位置是否在節(jié)點顯示名稱上的isOnNode()方法,判斷鼠標(biāo)是否在節(jié)點連接線注釋的isOnEdgeLabel()方法.

其中,isOnNode()方法依次通過以下步驟實現(xiàn):

1.根據(jù)javascript庫jQuery提供的方法offset()獲取當(dāng)前鼠標(biāo)的坐標(biāo)信息mouseX和mouseX；

2.讀取存儲節(jié)點信息的nodeBoxes結(jié)構(gòu)中的節(jié)點中心的坐標(biāo)nodeX和nodeY；

3.讀取存儲節(jié)點信息的nodeBoxes結(jié)構(gòu)中的節(jié)點寬度width和高度height；

4.計算節(jié)點的坐標(biāo)范圍,在本系統(tǒng)中節(jié)點的坐標(biāo)范圍為:

i.

ii.

5.遍歷nodeBoxes結(jié)構(gòu)中的所有節(jié)點范圍,判斷當(dāng)前鼠標(biāo)位置是否滿足上述范圍；

isOnEdgeLabel()方法依次通過以下步驟實現(xiàn):

1.讀取存儲節(jié)點連接線信息的edgeBoxes結(jié)構(gòu)中節(jié)點連接線的中心坐標(biāo)edgeX和edgeY以及節(jié)點連接線注釋的寬度width和高度height；

2.計算節(jié)點連接線注釋的坐標(biāo)范圍,在本系統(tǒng)中節(jié)點連接線注釋的坐標(biāo)范圍為:

3.遍歷nodeBoxes結(jié)構(gòu)中的所有節(jié)點連接線的注釋范圍,判斷當(dāng)前鼠標(biāo)位置是否滿足上述范圍.

所述圖形元素包括節(jié)點顯示名稱和節(jié)點連接線注釋以及其他空白部分.所述鼠標(biāo)事件包括鼠標(biāo)移動,按鍵按下和按鍵彈起三個事件.相應(yīng)的鼠標(biāo)事件響應(yīng)處理程序具體實施步驟為:

1.綁定<canvas>的mousedown()事件和mousemove()事件；

2.判斷用戶是否按下鼠標(biāo).若用戶按下鼠標(biāo),則清空鼠標(biāo)移動標(biāo)記,mousemoved并解綁mousemove()事件,綁定鼠標(biāo)拖拽事件mousedrag()；

3.判斷用戶是否移動鼠標(biāo).若是,則設(shè)置鼠標(biāo)移動標(biāo)記mousemoved為true,轉(zhuǎn)至下一步；否則,轉(zhuǎn)至第7步.

4.使用isOnNode()方法判斷當(dāng)前鼠標(biāo)位置是否在節(jié)點上,若是,則轉(zhuǎn)入相應(yīng)的鼠標(biāo)移至節(jié)點事件處理程序；否則,轉(zhuǎn)至下一步；

5.使用isOnEdge()方法判斷當(dāng)前鼠標(biāo)位置是否在節(jié)點連接線注釋上.若是,則轉(zhuǎn)入相應(yīng)的鼠標(biāo)移至節(jié)點連接線事件處理程序；否則,轉(zhuǎn)至下一步；

6.判斷用戶鼠標(biāo)按鍵是否彈起,若是,則轉(zhuǎn)至下一步；否則,結(jié)束此程序；

7.通過讀取mousemoved的值判斷鼠標(biāo)是否移動過；若是,則識別為鼠標(biāo)拖拽事件,轉(zhuǎn)至相應(yīng)的鼠標(biāo)拖拽事件處理程序；否則識別為鼠標(biāo)點擊事件,轉(zhuǎn)至相應(yīng)的鼠標(biāo)點擊事件處理程序.

其中,對于本系統(tǒng)而言,由于采用了arbor.js庫的節(jié)點布局算法,當(dāng)用戶使用鼠標(biāo)拖拽圖形時,默認(rèn)的鼠標(biāo)拖拽事件為動態(tài)設(shè)置節(jié)點的位置,目的在于使系統(tǒng)處于穩(wěn)定的平衡狀態(tài).

所述的鼠標(biāo)移至節(jié)點事件處理程序是指當(dāng)用戶鼠標(biāo)置于節(jié)點上時,鼠標(biāo)形狀由箭頭變?yōu)槭中?并在鼠標(biāo)右上方放置浮動的說明文本.該文本描述了節(jié)點的說明信息.

所述的鼠標(biāo)移至節(jié)點連接線事件處理程序是指當(dāng)用戶的鼠標(biāo)置于節(jié)點連接線上時,鼠標(biāo)形狀由箭頭變?yōu)槭中?并在鼠標(biāo)右上方放置浮動的說明文本.該文本描述了節(jié)點連接線的說明信息.

所述的鼠標(biāo)點擊事件是指當(dāng)用戶鼠標(biāo)點擊節(jié)點上時,當(dāng)前的web頁面跳轉(zhuǎn)至節(jié)點的詳細(xì)說明頁面,以便給用戶提供更多的關(guān)于點擊節(jié)點的說明信息.

第六步:將繪制好的圖形輸出并顯示在html頁面上.

本發(fā)明通過使用開源的javascript庫的力導(dǎo)向節(jié)點布局算法來設(shè)定節(jié)點的坐標(biāo),然后繪制支持自定義格式的節(jié)點以及節(jié)點連接線,并設(shè)置相應(yīng)的圖形元素鼠標(biāo)事件響應(yīng)程序,最終將一個支持鼠標(biāo)事件的節(jié)點關(guān)系圖高效、清晰地顯示在網(wǎng)頁上.

與傳統(tǒng)的節(jié)點關(guān)系圖圖片方式相比,本發(fā)明不需要后臺服務(wù)器生成靜態(tài)的節(jié)點關(guān)系圖,將圖形的處理操作轉(zhuǎn)移到用戶的瀏覽器上,大大的減少了后臺服務(wù)器的壓力；同時,后臺服務(wù)器只需要傳輸輕量級的json數(shù)據(jù)到用戶瀏覽器即可,降低了數(shù)據(jù)的傳輸延時,使得圖形加載速度較靜態(tài)圖片方式提高了很多.同時,本發(fā)明還支持用戶對圖形的不同元素的鼠標(biāo)事件,這是傳統(tǒng)的靜態(tài)圖片方式所不具有的功能.

與HTML+javaapplet相比,本發(fā)明符合W3C組織的新一代HTML標(biāo)準(zhǔn),使用了html5的新特性<canvas>標(biāo)簽的繪圖功能,而HTML5標(biāo)準(zhǔn)中已不再支持<applet>標(biāo)簽,部分瀏覽器的新版本也不再對<applet>標(biāo)簽提供支持.

與HTML+flash相比,本發(fā)明簡單易用,用戶無需安裝額外的瀏覽器插件,即可快速的顯示節(jié)點關(guān)系圖,并提供了豐富的鼠標(biāo)事件響應(yīng)功能.

在本說明書的描述中，參考術(shù)語“一個實施例”、“一些實施例”、“示例”、“具體示例”、或“一些示例”等的描述意指結(jié)合該實施例或示例描述的具體特征、結(jié)構(gòu)、材料或者特點包含于本發(fā)明的至少一個實施例或示例中.在本說明書中，對上述術(shù)語的示意性表述不一定指的是相同的實施例或示例.而且，描述的具體特征、結(jié)構(gòu)、材料或者特點可以在任何的一個或多個實施例或示例中以合適的方式結(jié)合.

盡管已經(jīng)示出和描述了本發(fā)明的實施例，本領(lǐng)域的普通技術(shù)人員可以理解：在不脫離本發(fā)明的原理和宗旨的情況下可以對這些實施例進(jìn)行多種變化、修改、替換和變型，本發(fā)明的范圍由權(quán)利要求及其等同物限定。