js中經常使用的幾款組織架構圖

前幾天在工做中拿到一個須要處理組織架構的業務需求，因而翻閱了在git上star數量較多的幾款組織架構圖插件進行對比。

jOrgChart

github.com/wesnolte/jOrgChart

• 給定一個嵌套無序列表元素，容易使用。
• 其中的拖放功能容許從新排序樹和底層的結構。
• 經過點擊相應的節點來顯示/隱藏樹的特定分支。
• 節點能夠包含除和以外的任何數量的HTML。
• 風格簡單。
• 子樹摺疊，對於大型組織架構有用。

OrgChart

github.com/dabeng/OrgChart

• 支持本地數據和遠程數據（JSON）。
• 基於CSS3過渡的平滑展開/摺疊效果。
• 將圖表對齊到4個方向。
• 容許用戶經過拖放節點更改組織結構。
• 容許用戶動態編輯組織圖並將最終層次結構保存爲JSON對象。
• 支持將圖表導出爲圖片。
• 支持平移和縮放。
• 用戶能夠採用多種解決方案構建龐大的組織圖。
• 適配移動端。

jquery-orgchart

github.com/caprica/jquery-orgchart 

• HTML標記，在節點中擁有可點擊的超連接;
• 源列表中的全部屬性都會被添加到相應的圖表節點；
• 用於將圖表限制爲所需級別數量，並在單個堆棧中顯示剩餘級別的選項;
• 回調處理點擊的圖表節點;
• 體積小，僅3K；
• 經過覆蓋CSS樣式，很容易改變圖表的外觀;
• 擴展性強；

GetOrgChart

www.getorgchart.com/ 

• 容許開發人員建立複雜的樹結構。
• 與服務器端組件一塊兒使用時，開發人員還能夠使用特製界面和編輯圖表。
• 默認狀況下，GetOrgChart包含各類皮膚和調色板，但開發人員也能夠建立主題。
• 若是GetOrgChart圖表變得過大，內置的搜索字段容許用戶搜索項目。
• 若是GetOrgChart圖表變得過大，用戶能夠使用表格模式查看原始數據
• 而不須要視覺層次結構。
• 免費。

D3.js

d3js.org/

• D3容許您將任意數據綁定到文檔對象模型（DOM）。
• 提供了非凡的靈活性。
• D3運算速率極快，支持大量數據和動態行爲進行交互的動畫。
• 相似繪製svg的jQuery。