使用js实现思维导图

本文主要阐述使用js实现思维导图的关键技术点，如果还不知道什么是思维导图的同学，请自行度娘。以下是demo和源码的传送门：

demo：http://sources.ikeepstudying.com/mindmaptree-master/
源码：http://github.com/RockyRen/mindmaptree/tree/master

下载：mindmaptree-master

 

在源码中我使用了svg绘制思维导图。与canvas相比，svg将图像当成对象，我们可将思维导图中节点和线等图形表现为对象，而且svg更适合用于动态交互的应用

 

下面介绍几个关键技术点：

 

子节点位置的重绘
一个基本的思维导图工具应该拥有增加节点和删除节点的功能。在某个节点上增删节点时，为了使得所有子节点的高度相对于该节点垂直居中，都会重新渲染子节点的垂直位