一種基于d3的研討系統(tǒng)思維導(dǎo)圖及其開(kāi)發(fā)方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于計(jì)算機(jī)技術(shù)領(lǐng)域，特別涉及一種基于D3的研討系統(tǒng)思維導(dǎo)圖及其開(kāi)發(fā)方法。
【背景技術(shù)】
[0002]思維導(dǎo)圖是一種將發(fā)散性思維圖形化的軟件工具。在研討思維導(dǎo)圖展示上面，國(guó)外更多的是放在研討思維可視化和相關(guān)工具開(kāi)發(fā)上面，這些開(kāi)發(fā)的可視化工具可視化效果好，界面流暢且富有美感和動(dòng)感，用戶(hù)體驗(yàn)和交互性都比較好，能清楚的記錄和分析個(gè)人的思維運(yùn)動(dòng)方向和聯(lián)系，但是這些工具并不能展示出群體的思維。而國(guó)內(nèi)在研討思維導(dǎo)圖展示方面有代表性的“電子公共大腦”和“專(zhuān)家研討系統(tǒng)”，雖然可以容納多數(shù)成員進(jìn)行協(xié)商研討，隨著研討進(jìn)行達(dá)成共識(shí)。但是都是基于C/S(客戶(hù)機(jī)/服務(wù)器)結(jié)構(gòu)的模型，需要安裝客戶(hù)端，帶來(lái)了很多的開(kāi)發(fā)上面的難度且復(fù)用性低，界面也比較粗糙，不能直觀(guān)給參與研討者帶來(lái)很好的感官享受。而且C/S模型并不適合大量用戶(hù)的并發(fā)。

【發(fā)明內(nèi)容】

[0003]基于以上問(wèn)題，本發(fā)明利用國(guó)外流行的可視化工具D3(—個(gè)創(chuàng)建數(shù)據(jù)可視化圖形的JavaScript庫(kù))同時(shí)結(jié)合國(guó)內(nèi)研討信息思維導(dǎo)圖可支持多用戶(hù)并發(fā)思維的特點(diǎn)采用B/S(瀏覽器/服務(wù)器)結(jié)構(gòu)，開(kāi)發(fā)了一個(gè)基于D3的研討系統(tǒng)思維導(dǎo)圖。
[0004]為了解決思維導(dǎo)圖在研討系統(tǒng)中層次感不夠清晰和人為參與度不夠的缺點(diǎn)，本發(fā)明采用D3可視化模塊和樹(shù)算法，不會(huì)造成節(jié)點(diǎn)的局部堆積擁擠，用戶(hù)通過(guò)該可視化組件動(dòng)態(tài)的觀(guān)察研討信息結(jié)構(gòu)，清晰地了解研討信息之間的邏輯關(guān)系，并且能夠更好的通過(guò)視覺(jué)來(lái)激發(fā)思維，挖掘潛力，達(dá)到討論問(wèn)題的最優(yōu)狀態(tài)。
[0005]本發(fā)明中的思維導(dǎo)圖主要有三個(gè)模塊協(xié)同合作共同完成，先由數(shù)據(jù)封裝模塊把數(shù)據(jù)庫(kù)的數(shù)據(jù)封裝以后傳入數(shù)據(jù)解析模塊中，經(jīng)過(guò)數(shù)據(jù)解析模塊的解析處理以后再交由圖形繪制模塊來(lái)繪制出思維導(dǎo)圖。
[0006]為解決上述技術(shù)問(wèn)題，本發(fā)明采用如下技術(shù)方案實(shí)現(xiàn):
[0007]一種基于D3的研討系統(tǒng)思維導(dǎo)圖，包括依次連接的數(shù)據(jù)封裝模塊、數(shù)據(jù)解析模塊、圖形繪制模塊;數(shù)據(jù)封裝模塊獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，之后將數(shù)據(jù)庫(kù)的數(shù)據(jù)封裝成JSON格式傳入數(shù)據(jù)解析模塊，經(jīng)過(guò)重解析以后傳入圖形繪制模塊，最終完成研討信息思維導(dǎo)圖可視化的過(guò)程。
[0008]所述數(shù)據(jù)封裝模塊中，采用數(shù)據(jù)轉(zhuǎn)換框架把從數(shù)據(jù)庫(kù)中獲取的數(shù)據(jù)轉(zhuǎn)換成JSON數(shù)據(jù)。
[0009]所述數(shù)據(jù)解析模塊中，利用JavaScript腳本語(yǔ)言對(duì)返回的數(shù)據(jù)進(jìn)行重新解析，并把解析以后的數(shù)據(jù)作為參數(shù)傳遞到圖形繪制模塊的接口中。
[0010]所述圖形繪制模塊接收數(shù)據(jù)解析模塊傳遞過(guò)來(lái)的信息，利用D3完成研討信息思維導(dǎo)圖的繪制。
[0011]—種基于D3的研討系統(tǒng)思維導(dǎo)圖的開(kāi)發(fā)方法，包括以下步驟:
[0012]步驟一:在項(xiàng)目工程中首先引入D3.js和tree, js兩個(gè)依賴(lài)js的文件；
[0013]步驟二:數(shù)據(jù)封裝模塊把由數(shù)據(jù)庫(kù)接收到的數(shù)據(jù)轉(zhuǎn)換成更適合前端的JSON數(shù)據(jù)；
[0014]采用一個(gè)開(kāi)源數(shù)據(jù)轉(zhuǎn)換框架Jackson來(lái)實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)換，定義一個(gè)數(shù)據(jù)庫(kù)表數(shù)據(jù)轉(zhuǎn)換成JSON的轉(zhuǎn)換方法searchTreeeSo Iut1nArgument ()，該方法中通過(guò)soIut1nService對(duì)象的getTree JsonChart()方法返回需要的JSON類(lèi)型研討信息對(duì)象，并將其存放在JsonChart類(lèi)型的對(duì)象數(shù)組中，再由JSONArray對(duì)象轉(zhuǎn)化成String類(lèi)型進(jìn)行前后臺(tái)的數(shù)據(jù)傳輸，利用renderText()方法將所返回的String數(shù)據(jù)封裝到HttpServletResponse對(duì)象中，通過(guò)對(duì)該對(duì)象的寫(xiě)入操作實(shí)現(xiàn)數(shù)據(jù)對(duì)前端的輸出傳遞；
[0015]步驟三:通過(guò)數(shù)據(jù)封裝模塊把數(shù)據(jù)庫(kù)的數(shù)據(jù)組裝完成后，再通過(guò)servlet內(nèi)置對(duì)象傳遞到前端的數(shù)據(jù)解析模塊，數(shù)據(jù)解析模塊通過(guò)Javascript腳本語(yǔ)言對(duì)返回的數(shù)據(jù)進(jìn)行重新的解析，把解析出來(lái)的數(shù)據(jù)作為參數(shù)傳遞給圖形繪制模塊提供的統(tǒng)一接口中；
[0016]步驟四:圖形繪制模塊接收到來(lái)自數(shù)據(jù)解析模塊的參數(shù)數(shù)據(jù)，調(diào)用圖形繪制模塊中的tree, js組件來(lái)完成研討信息可視化的思維導(dǎo)圖繪制，在整個(gè)的繪制過(guò)程中，采用反轉(zhuǎn)Ajax的推送技術(shù)，異步的提交數(shù)據(jù)請(qǐng)求，不斷的更新數(shù)據(jù)，重畫(huà)圖形，最終來(lái)完成研討信息的思維導(dǎo)圖；
[0017]在顯示端的jsp或者h(yuǎn)tml頁(yè)面添加js文件路徑的引入并添加幾行關(guān)鍵代碼，創(chuàng)建tree對(duì)象并傳入將要顯示的數(shù)據(jù)參數(shù)，窗口參數(shù)根據(jù)頁(yè)面的窗口大小進(jìn)行設(shè)定，然后用j Query中的$.ajax ()方法向處理層提交申請(qǐng)，該方法通過(guò)不斷的向控制層提交請(qǐng)求實(shí)現(xiàn)反轉(zhuǎn)ajax方式，控制層轉(zhuǎn)發(fā)到相應(yīng)的act1n中進(jìn)行處理;Act1n調(diào)用相關(guān)service方法將數(shù)據(jù)結(jié)果進(jìn)行內(nèi)置對(duì)象的封裝，并且用返回函數(shù)的形式提交到前端的顯示頁(yè)面進(jìn)行處理。
[0018]本發(fā)明的主要特點(diǎn):
[0019]1、采用樹(shù)狀結(jié)構(gòu)展示有很強(qiáng)的視覺(jué)層次感和空間利用率。
[0020]2、動(dòng)態(tài)的展示了研討信息結(jié)構(gòu)，使人們可以清晰的了解研討信息之間的邏輯關(guān)系O
[0021]3、在研討信息系統(tǒng)中支持多人并發(fā)思維展示。
[0022]本發(fā)明與現(xiàn)有技術(shù)相比具有如下優(yōu)點(diǎn)和有益效果:
[0023]首先，在前面比較成熟的電子公共大腦中采用的是有向直線(xiàn)的形式來(lái)表示結(jié)點(diǎn)間的不同關(guān)系，這種表示方式雖然也是樹(shù)狀層次結(jié)構(gòu)，但是在空間層次感和視覺(jué)直觀(guān)感上面并不能令人滿(mǎn)意，反而在層次的展示反面顯得比較乏力，并且當(dāng)節(jié)點(diǎn)的數(shù)目增多的時(shí)候會(huì)顯得異常的擁擠。本發(fā)明在圖形繪制模塊中采用樹(shù)算法來(lái)實(shí)現(xiàn)樹(shù)狀圖的開(kāi)發(fā)，這樣不會(huì)造成節(jié)點(diǎn)的局部堆積擁擠，增強(qiáng)了視覺(jué)層次感和空間利用率。
[0024]其次，在專(zhuān)家研討系統(tǒng)中，采用C/S系統(tǒng)模式研討信息是以目錄狀的形式展示出來(lái)的，相比較電子公共大腦不會(huì)造成節(jié)點(diǎn)的擁擠，但是在層次感的展示方面顯得不夠清晰，且不符合人們?nèi)粘哟谓Y(jié)構(gòu)的視覺(jué)習(xí)慣。本發(fā)明通過(guò)基于D3的可視化思維導(dǎo)圖模塊，動(dòng)態(tài)顯示研討信息，清晰的展示了研討信息之間的邏輯關(guān)系，從而達(dá)討論問(wèn)題的最好狀態(tài)。
【附圖說(shuō)明】
[0025]圖1是利用D3研討思維導(dǎo)圖模塊來(lái)展示思維的示意圖(現(xiàn)有技術(shù))；
[0026]圖2本發(fā)明中完整的D3繪制思維導(dǎo)圖的流程圖；
[0027]圖3數(shù)據(jù)封裝模塊示意圖；
[0028]圖4數(shù)據(jù)解析模塊示意圖；
[0029]圖5圖形繪制模塊示意圖。
【具體實(shí)施方式】
[0030]下面結(jié)合附圖及實(shí)施例對(duì)本發(fā)明作進(jìn)一步說(shuō)明。
[0031]—種基于D3的研討系統(tǒng)思維導(dǎo)圖，如圖2所示，包括依次連接的數(shù)據(jù)封裝模塊、數(shù)據(jù)解析模塊、圖形繪制模塊;數(shù)據(jù)封裝模塊獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，之后將數(shù)據(jù)庫(kù)的數(shù)據(jù)封裝成JSON格式傳入數(shù)據(jù)解析模塊，經(jīng)過(guò)重解析以后傳入圖形繪制模塊，最終完成研討信息思維導(dǎo)圖可視化的過(guò)程。
[0032]在具體實(shí)施開(kāi)發(fā)的方面，由于做了代碼的封裝處理，在系統(tǒng)中引入和使用只需要三個(gè)步驟:
[0033]步驟一:在項(xiàng)目工程中首先引入D3.js和tree,js(是提供了非常多的3D顯示功能的JavaScript庫(kù))兩個(gè)依賴(lài)js的文件。
[0034]步驟二:引入數(shù)據(jù)封裝模塊把由數(shù)據(jù)庫(kù)接收