最近一个项目里有个前端绘制家谱图的需求,大概是下面这个样子:
基于Vue实现动态组织结构图
点击节点会弹出操作菜单,实现增删改查等操作,查阅网上资料发现,现有案例基本都是基于orgchart这个jQuery插件实现的,我们的项目是基于Vue的,不希望因为这个功能引入jQuery,所以就基于Vue实现了一个简易版的树形图/组织结构图组件:Vue-Tree-Chart。
Vue-Tree-Chart实现了最核心的组织结构图动态绘制和点击节点回调,基于这两点已经可以满足绝大多数相关需求了,例如前端动态增删改,无非是编辑组件数据,利用Vue的数据驱动特性界面就会自动更新;服务端增删改就更简单了,前端只管请求操作接口,操作结束后拉取最新数据同步给组件就行了;组件默认界面非常简单,只引入了图表呈现所必须的少量样式,后期非常方便自定义风格;至于拖动、缩放、导出等不太普遍的需求,组件没有内置,但是在源码基础上实现这些扩展也都比较简单。
如何绘制结构图
不靠谱的思路
拿到这个需求后我首先想到的思路是用DIV布局+JS动态计算实现,如果不考虑节点连线的话,这个思路其实勉强也能应付,大致实现分为三步:
一、将数据按“代”拆分
原始数据格式只能是层层深入的JSON对象:
{
name: 'root',
children: [{
name: 'child',
children: [{
name: 'grandchild',
...
}]
}]
}
按“代”拆分后成为这样:
[
[{
id: 0,
name: 'root
}],
[{
id: 1,