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。