基于Vue实现动态组织结构图

最近一个项目里有个前端绘制家谱图的需求，大概是下面这个样子：

基于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,