作者：安曉輝 程序視界
我這段時間給我的課程開發工具，想要做一個基于Web的組織結構圖生成工具，生成類似下面這樣的結構圖。
你知道的，我熟練的開發語言是C++，比較擅長的是C++后端和客戶端開發，對html和JAVAScript都不熟悉。所以我第一反應就是找一些開源的庫，組合一下看能不能實現。
我先找到了jsMind，發現它很強大，做出來的思維導圖也很漂亮，類似下面這樣：
可是我去翻看它在GitHub上的項目代碼和文檔，卻發現它只支持 left、right 這種樣式的導圖，不支持bottom、top這種方向的圖。
我試著使用transform旋轉了一個div，結果畫出來的圖簡直了，一坨一坨的。
一邊贊嘆著這個開源庫的強大，一邊放棄了它，找到了Qunee for HTML5。
哇，這個解決方案非常友好，文檔還有中文的，示例也很全，看例子，就能滿足我的需求。可是我一看，嘿嘿，一年的授權費用幾萬塊，我的小工具，用不起。
于是只好繼續尋找開源庫，嘿嘿，居然找到一個看起來也可以實現我需求的庫，my-mind，做出的東西，類似這樣。
嗯，效果不錯，測試頁面上有支持 bottom、up 的選項，明顯可以實現我的需求。
可是我翻了翻GitHub上的源碼，啊哈，居然沒有找到文檔……API說明也沒……后來研究了一陣子，發現，這個更多是個工具……雖然代碼開源，但比較難整合到自己的項目中……
于是繼續找，嘿嘿，皇天不負有心人，我找到了jTopo，個人開發的，能做出來的東西，也蠻好。
而且每個示例都有源碼……雖然，jTopo沒什么文檔……也還可以看。關鍵是，只有一個js文件，打包后77kb，引入項目非常方便，正合我意。
于是我就下載了最新版本，用Node.js搭建了一個環境，開始寫代碼調試。
參考人家的例子，搞定了圓角矩形、文字、各種風格的連線，做出了點樣子。
可是我想把第三個層級做成本文開頭那個樣子，就需要自定義節點，自定義節點時，我發現，要畫圖，而我畫的豎線，怎么調整，都和第二個層級的節點，連接不到一起去！
你說這是鬧哪般！
我決定再找找其他框架，發現了一個超級強大的，叫InfoVis，哇，樹圖還可以有很贊的動畫效果。
可是……看起來這個東西好龐大，想用到項目里好麻煩……我看了會示例和源碼，20分鐘過去，還沒看明白……
于是我又找別的，找到了這個：
唉，一堆依賴啊，頭疼……
后來我想，我要做出的效果，就是幕布提供的那種圖呀，于是我就用Chrome的開發者模式，研究幕布的頁面源碼，發現它的思維導圖，居然就是用div+Canvas動態生成的html元素組合出來的……我想參考這個，而且明顯是可行的……可分析了一下頁面里的代碼，感覺個把小時也搞不定它的繪圖邏輯……
我的心好亂，這一通研究，一天就要過去鳥~
后來我一狠心，心想我就是這么兩三天的任務周期，不能這么找來找去浪費時間，干脆自己造輪子吧，用 HTML5 的 Canvas 自己畫，后臺用 Node.js 來做個簡單的服務，兩邊一對接，完事兒。
你別說，這么整，還真是蠻快的，一天功夫，前后端跑通了，可以根據用戶錄入的數據，動態生成 bottom 樣式的圖了。
目前還有幾個小缺陷，1）沒法保存圖片；2）移動端沒適配。但我想，再花一兩天時間，就可以搞定了，下周就能給訓練營用上。
◇◇◇
經過這兩天的折騰，我理解了為什么我們程序員愛造輪子。對我們的小需求而言：
- 商業的太貴；
- 開源的又沒那么方便，要么沒文檔，要么整合起來復雜，要么需要改造才能用，要么過于巨大；
- 時間緊任務急，沒那么多時間研究。
而自己造，只針對當下需求就v z好，簡單粗暴速度快好交活兒。
