1. 程式人生 > >漫談可視化Prefuse(五)

漫談可視化Prefuse(五)

概念 detail 主界面 關於 整合 idt turn pri 縮放

  伴隨著前期的基礎積累,翻過API,讀過一些Demo,總覺得自己已經摸透了Prefuse,小打小鬧似乎已經無法滿足內心膨脹的自己。還記得兒時看的《武狀元蘇乞兒》中降龍十八掌最後一張居然是空白頁,在千鈞一發之際以為自己要嗝屁了,一陣東風讓蘇乞兒明白了,最後一章要做的原來是——整合。沒錯,今天我們就來好好談談整合!

  看懂API不代表你會靈活運用某個類,會用一些類不代表能實現小功能,耍的了小功能不一定會做可視化工具整合,整合之道,奧妙無窮!

  前篇回顧:上篇《漫談可視化Prefuse(四)---被玩壞的Prefuse API》主要從Prefuse API角度,單線條的依據API之道,對部分類進行剖析,通過coding實現小功能並輔之於圖為證,大致提供了一條學習Prefuse的路線。期間也有眾多誌同道合之友前來了解Prefuse到底為何物、能做什麽,問答之間著實讓人興奮不已。

  本篇作為在博客園裏漫談可視化Prefuse系列的收尾篇,主要看看自己對於Prefuse的粗劣的整合,重點介紹下自己在整合期間印象較為深刻的片段和coding瞬間。其中包括有對於單例模式、匿名內部類、源碼改動等認識。

  1.理想與現實——總會有差距

  需求催生產品,產品總是滯後不斷更新的需求。

  需求:一款visualization tool,像Gephi那樣炫酷,像i2那樣流暢強大;

  產品:不斷更叠中

  問題:需要全手工搭建,了解Swing,熟悉Prefuse,學會借鑒,深諳拼湊整合之道

  功能(目前):數據導入+連接數據庫+圖片另存為+布局算法切換+節點標簽顯示+節點形狀改變+適合屏幕顯示+高亮近鄰顯示+控制圖形布局開關 等等

  產品部分截圖:

  (1)主界面

  技術分享

  界面頂部是實現功能的菜單欄(當然還有裹在各個菜單欄裏面的菜單選項);

  界面左邊是信息提示框,用於顯示導入圖形的節點和邊的相關信息,信息提示面板中還有一個隱藏的Label用於顯示有向/無向/混合圖信息以及一個控制布局的開關(初始狀態為灰,不可用);

  界面的核心部分是一個JSplitPanel,用於圖形的展示;

  整個圖形的布局采用GridBagLayout,無需為工具因為縮放以及最大化最小化而導致控件大小不能動態調整而煩惱

  (2)文件菜單欄

  技術分享

  其中功能有"打開...":用於打開指定文件並導入數據

  連接數據庫:用於連接Sql server2005數據庫,從中讀取點和邊信息並展示圖形,詳情點擊這裏。

  存儲為:初始狀態為灰不可用,因為此時沒有導入圖形,當圖形導入並展現後便可變為正常可用。用於存儲展示圖形

  退出:exit tool

  其他菜單欄不一一展示,在圖形為加載到面板時,大多數為灰不可用狀態。

  布局算法菜單欄:力導向布局、圓形布局、隨機布局、網格布局、FruchtermanReingold布局

  標簽配置菜單欄:不顯示、顯示文本、顯示文本與圖片

  節點配置菜單欄:圓形、矩形、圓角矩形

  控制器菜單欄:適應屏幕顯示

  2.源碼動一動——讓不可能成為可能

  作為老產品,想要與Gephi等同臺競技,不僅要拼實力,更要拼靈活應對,通過讀爛API都無法解決的問題,換個思維,動一動源碼就會豁然開朗。

  (1)節點形狀

  源碼中,Prefuse圖形展示的節點是矩形或是圓角矩形,怎麽看怎麽覺得有點突兀,不柔和,相比之下Gephi中的圓形看上去要舒服得多。那麽問題來了……如何完成這個功能,僅僅通過傳參等手段已經不夠用了,所以順藤摸瓜,找到LabelRenderer類

+ View Code

  從該類的紅色代碼可以發現,這裏只有兩種形狀RoundRectangle2D和Rectangle2D,所以需要修改源碼,添加第三種形狀圓形即Arc2D。

  改動如下:

+ View Code

    這樣就可以完成如下的轉變:

技術分享 技術分享

  (2)節點與標簽無關聯顯示

  雖然(1)實現了圖形的圓形節點顯示,但是存在一個問題:節點的大小會因為節點上標簽的不同而不同,顯然這個節點大小是不具備任何意義的,所以,源碼要改。我們要做的就是降低節點與標簽的大小形狀依賴,同時讓節點的形狀具有自己的意義,這裏通過按照每個節點度數來決定節點的大小,為了提高健壯性,這裏采用log函數對度數進行歸一化處理,另外還對於節點添加邊框顯示。最終得到的結果如下:

技術分享

  從以上兩個例子,我們可以發現源碼並不是不可撼動,源碼隨著時代的變遷也會有力不從心的那一天,

  3.三思而行——設計很重要 基礎要紮實

  (1)單例模式:

  在Prefuse講求一個數據中心Visualization的概念,所有的約束和效果都會添加到Visualization中,那麽如何保證在不同類中還能獲得到具有相同配置參數的數據中心對象。我們知道,不同的對象會有不同的參數、成員,所以,這裏我們采用單例模式。關於什麽是單例模式想必大家都不陌生,有餓漢式和懶漢式,不清楚的,網上可以找資料了解下。采用單例模式的好處是,在任何地方我們只要創建某個類的對象都是同一對象,從而保證了該對象的一致性,比如在可視化工具中要向一個已有的數據可視化中心對象visualization中添加一個布局Action效果,如果不采用傳值等方法而是新建一個對象,則會造成新建的數據中心對象中只有這個新添加的布局Action,從而"丟失"了前面的所有參數。

  該工具中的數據中心對象就是采用單例模式,部分代碼如下:

1 2 3 4 5 6 7 8 private static Visualization visInstance; public static Visualization getVisualization(){ if(visInstance == null){ visInstance = new Visualization(); } return visInstance; }

  (2)匿名內部類:

  以前只是知道匿名內部類有其特有的優越性和方便性,簡約,有其在Swing編程中經常被使用,但是一些使用細節不曾註意。

  在實際功能編寫中,遇到類似於添加監聽器這樣的操作,經常出現在匿名內部類中的變量報錯,提示信息也不清楚,後來網上一查,才知道原來在匿名內部類中使用的外部變量都需要為final類型,了解後對於匿名內部類與外部類之間的關系與生命周期又有了新的認識。關於匿名內部類與final的淵源詳見這裏。

  4.工具概覽

  下面從一個圖形的導入開始,通過圖形大致了解工具的一些功能:

  (1)點擊"打開..."菜單項後

  技術分享

  (2)選擇socialnet.xml並點擊‘"打開"

技術分享

  (3)點擊"確定",圖形展示

  技術分享

  可以看到左邊信息提示面板顯示了圖的節點和邊的數量以及圖的性質,同時將鼠標放在節點"Jeff"上,會有高亮顯示和近鄰節點顯示

  (4)點擊"FruchtermanReingold布局"

  技術分享

  (5)點擊標簽設置中的"不顯示"

技術分享

  (6)點擊節點設置中的"矩形"

技術分享

(7)數據量稍大時展現不吃力

技術分享

  雖然只是一個簡單的工具,雖然這個工具還不成氣候,雖然還有太多的體會沒有及時提及,但是卻真真實實的檢驗了自己也清醒的認識了自己。

  作為一名碼農,應該恪守"知行合一"的鐵律,沒做整合之前不要說自己能做到如何狂拽炫酷,也不用說自己如何舉步維艱。做好可行性分析,踏踏實實寫好每一行代碼,不斷思考是否有新的思路和更高效的設計和方法才是王道。

  如果覺得有用,記得點贊哦^_^

  本文鏈接:《漫談可視化Prefuse(五)---一款屬於我自己的可視化工具》

  如果您覺得閱讀本文對您有幫助,請點一下“推薦”按鈕,您的“推薦”將是我最大的寫作動力!如果您想持續關註我的文章,請掃描二維碼,關註JackieZheng的微信公眾號,我會將我的文章推送給您,並和您一起分享我日常閱讀過的優質文章。

  技術分享

友情贊助

如果你覺得博主的文章對你那麽一點小幫助,恰巧你又有想打賞博主的小沖動,那麽事不宜遲,趕緊掃一掃,小額地贊助下,攢個奶粉錢,也是讓博主有動力繼續努力,寫出更好的文章^^。

    1. 支付寶                          2. 微信

技術分享                      技術分享

漫談可視化Prefuse(五)