viz.js 使用小心得

上一篇提到了我最後選擇了 viz.js，經過一段被炸飛的使用時間之後，來補充一些實戰上的其他心得…… [淚目]

1. 用 viz.js 來 render DOT 碼時，如果 label 有 \，畫面上不會顯示出來。

2. DOT 碼中有中文（或著說非 ASCII），在 GWT 當中執行時會一直炸 parse 錯誤。原本以為是 GWT 的問題、因為把同樣的 DOT 碼用純 HTML 來跑就（幾乎）沒遇到問題。後來爬了一下 viz.js 的 issue，發現這個 issue 14，原來這是一個已知的 bug。後頭有一個日本人提供了一個堪稱我看過最詭異的 work around。假如原本的 JS 要這樣寫：

   var dot = DOT_GENERATOR();
   var svg = Viz(dot, "svg");
   

   現在要改成：

   var dot = DOT_GENERATOR();
   var svg = Viz(dot + new Array(dot.lengh).join(" "), "svg");
   

   真的有效，但是也真 WTF 的不明所以 [死]。

3. 有一個 repo RiveraGroup/viz.js 是從 viz.js fork 出去的。它有直接提供 viz.js 檔、README.MD 還有列出可以 support 哪些 GraphViz 的 layout、以及輸出的 format。不過在不嚴謹的測試之下，發現 RiveraGroup 的版本跟 viz.js 已經有所不同，至少 viz.js 不支援 fdp 這個 layout（例如這個範例），但是 RiveraGroup 的版本有（每次執行的結果還不一樣 ＝＝”）。

4. 承上，viz.js 的 Viz() 可以接收三種 format，分別是：

   • dot
   • svg
   • ps

   在 browser 的環境下，好像只有 svg 這個 format 比較有意義……

至於其他關於 DOT 語言的炸點…… 就是另外一個故事了 [淚目]

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，所以就沒有實際去試試看了……

以上簡單報告……