IT工程師數位筆記本

計劃做一個元數據平臺, 因為要包含血緣分析功能, 所以要調研一下js 拓撲圖庫, 候選對象主要參考知乎上的問答, javascript 有哪些適合做網絡拓撲圖形展示的包？

https://www.zhihu.com/question/20643359

------------------------
候選庫
------------------------
yfiles for html
(收費)是德國人搞的，很嚴謹，布局算法很厲害, http://live.yworks.com/yfiles-for-html/2.0/view/graphviewer/index.html
那個公司還有另一個牛逼產品 yEd

mxGraph , JavaScript Diagramming and Graph Visualization
(開源) 是jgraph的html版本，支持低版本的IE是亮點, https://github.com/jgraph/mxgraph

qunee for html5 , 開發清新、高效的圖形組件
(收費) 國人研發，簡潔、高效、用戶體驗好, http://qunee.com/

jTopo (Javascript Topology library), 是一款完全基于HTML5 Canvas的關系、拓撲圖形化界面開發工具包
jTopo(免費) 關注于數據的圖形展示，它是面向開發人員的，需要進行二次開發。http://www.jtopo.com/download.html

d3-force, 基于d3 的一個庫
d3-force(開源) https://github.com/d3/d3-force

dagre-d3, 另一個基于d3 的一個庫, 該github上說開發已經停止了, https://github.com/cpettitt/dagre-d3,  airflow調度系統用它顯示 pipeline 的flow圖

------------------------
選擇
------------------------
當然是要選免費的了, 首選 mxGraph, 樣子很漂亮, 文檔詳盡, 而且從2006年開始一直活躍開發中.  jTopo也算不錯.

mxGraph幾個有特點是的例子,

帶圖標 https://jgraph.github.io/mxgraph/javascript/examples/fileio.html

定制化圖標位置的示例, https://jgraph.github.io/mxgraph/javascript/examples/fixedicon.html

鼠標右鍵菜單, https://jgraph.github.io/mxgraph/javascript/examples/events.html

更完整的右鍵菜單, https://jgraph.github.io/mxgraph/javascript/examples/schema.html

點擊node/edge能在屬性頁簽上顯示其屬性,  https://jgraph.github.io/mxgraph/javascript/examples/userobject.html

變換布局, https://jgraph.github.io/mxgraph/javascript/examples/graphlayout.html

node 上label顯示的位置, https://jgraph.github.io/mxgraph/javascript/examples/labelposition.html

node上動態顯示alarm, https://jgraph.github.io/mxgraph/javascript/examples/monitor.html

在圖標下方出現context icon按鈕, https://jgraph.github.io/mxgraph/javascript/examples/contexticons.html 

隱藏和顯示節點, (這個例子幫助我們實現search功能, 找到一個node, 然后設置style) https://jgraph.github.io/mxgraph/javascript/examples/visibility.html

動畫edge流向圖, https://jgraph.github.io/mxgraph/javascript/examples/animation.html

zoom-in/zoom-out, https://jgraph.github.io/mxgraph/javascript/examples/handles.html