2013-11-08

JS 版 GraphViz 初步 survey 結果

正在寫一個輔助工作的系統。需要把一堆有順序關係的資料轉換成圖表。

一開始先是找到 arborjs.org 的這個 showcase,我還蠻喜歡它的效果,看著 node 飄來飄去想要找一個比較舒服的位置,很有療癒的效果(謎之聲:WTF?)。但是這個 project 實在找不到文件,正在從 cdoe 裡頭試圖 farm 用法的時候, tkcn 大人給了一個關鍵字:「GraphViz」。

幹,原來有這種東西 [死]

GraphViz 弄了一個叫做 dot 的描述語言,來表達 node 跟 node 之間的關係、以及 node 的形式等等。至於圖會長得怎樣就看 rendering engine 怎麼噴(是說我也不是很 care 啦 XD)。既然知道了這個好東西,就開始找看看有沒有 JS 版的 rendering engine。

一開始找到的是 livizjs 這個 repo,也有 demo 頁面。不過一開始在 Chrome 上頭就炸了 exception 不能順利執行,倒是 Firefox 沒有這個問題。然後… 這也是一個沒有說明文件的東西… 而且一堆路徑、DOM id 還 hardcode 寫死。到這裡也都還撐得住。等到寫完資料轉成 dot 格式,然後用正式資料去 run 的時候就悲劇了。SVG 的大小不知道在那一行程式當中被限定住,node 數少的時候沒有問題,node 數一多就爆邊界、還不知道要怎麼調整。接連 combo 攻擊下我放棄了,重新 survey。

最後找到 viz.js 這個 repo,基本上也是顯示成 SVG,不過不像 livizjs 有提供運算過程、動畫之類的花俏功能。雖然依然沒有文件 [淚目],不過用起來很簡單,只要把 dot 碼傳進物件中就好:

<script src="viz/viz.js"></script>
<script>
    var svg = Viz("digraph { a -> b; }", "svg");
    document.getElementById("foo").innerHTML = svg;
<script>

是說不知道還支援什麼輸出 type?

viz.js 唯一的怪哏就是它沒有提供 viz.js 檔。作者把 viz.js 當作 binary 檔案…. [炸],估計是要自己跑 Makefile?不過也無所謂,直接連範例網頁,抓上頭的 viz.js 檔就可以正常執行。目前看起來都沒啥太大問題,只要你不考究畫出來的圖夠不夠好看…… [遠目]


Update v1:

要在 GWT 當中用也十分簡單,簡單到不想包一個 class 來處理 XD。首先,當然要在 host page 補上 viz.js 檔(同上),然後在 Java 中:

//JSNI 的 method
private native String genGraphViz(String dot) /*-{
    return $wnd.Viz(dot, "svg");
}-*/;

//準備一個 HTML widget,這裡直接用 UiBinder 寫了
@UiField HTML svg;

//某個神奇的角落
svg.setHTML(genGraphViz(DOC_CODE));

你看,是不是很簡單呢? [麥兜母調]


Update V2

另外找到這個純正 GWT 的 GraphicViz project:Exagraph,不過我(還)很滿意現在的 viz.js,所以就沒有實際去試試看了……

以上簡單報告……