Web思维导图实现的技术点分析（附完整源码）简介思维导图是⼀种常见的表达发散性思维的有效⼯具，市⾯上有⾮常多的⼯具可以⽤来画思维导图，有免费的也有收费的，此外也有⼀些可以⽤来帮助快速实现的JavaScript类库，如：、。
技术选型这种图形类的绘制⼀般有两种选择：svg和canvas，因为思维导图主要是节点与线的连接，使⽤与html⽐较接近的svg⽐较容易操作，svg的类库在试⽤了和后，有些需求在snap⾥没有找到对应的⽅法，所以笔者最终选择了svgjs。
为了能跨框架使⽤，所以思维导图的主体部分作为⼀个单独的npm包来开发及发布，通过类的⽅式来组织代码，⽰例页⾯的开发使⽤的是vue2.x全家桶。
整体思路笔者最初的思路是先写⼀个渲染器，根据输⼊的思维导图数据，渲染成svg节点，计算好各个节点的位置，然后显⽰到画布，最后给节点连上线即可，接下来对思维导图的操作都只需要维护这份数据，数据变化了就清空画布，然后重新渲染，这种数据驱动的思想很简单，在最初的开发中也没有任何问题，⼀切都很顺利，因为模拟数据就写了四五个节点，然⽽后来当我把节点数量增加到⼏⼗个的时候，发现凉了，太卡了，点击节点激活或者展开收缩节点的时候⼀秒左右才有反应，就算只是个demo也⽆法让⼈接受。
卡的原因⼀⽅⾯是因为计算节点位置，每种布局结构最少都需要三次遍历节点树，加上⼀些计算逻辑，会⽐较耗时，另⼀⽅⾯是因为渲染节点内容，因为⼀个思维导图节点除了⽂本，还要⽀持图⽚、图标、标签等信息、svg不像html会⾃动按流式布局来帮你排版，所以每种信息节点都需要⼿动计算它们的位置，所以也是很耗时的⼀个操作，并且因为svg元素也算是dom节点，所以数量多了⼜要频繁操作，当然就卡了。
卡顿的原因找到了，怎么解决呢？⼀种⽅法是不⽤svg，改⽤canvas，但是笔者发现该问题的时候已经写了较多代码，⽽且就算⽤canvas树的遍历也⽆法避免，所以笔者最后采⽤的⽅法的是不再每次都完全重新渲染，⽽是按需进⾏渲染，⽐如点击节点激活该节点的时候，不需要重新渲染其他节点，只需要重新渲染被点击的节点就可以了，⼜⽐如某个节点收缩或展开时，其他节点只是位置需要变化，节点内容并不需要重新渲染，所以只需要重新计算其他节点的位置并把它们移动过去即可，这样额外的好处是还可以让它们通过动画的⽅式移动过去，其他相关的操作也是如此，尽量只更新必要的节点和进⾏必要的操作，改造完后虽然还是会存在⼀定卡顿的现象，但是相⽐之前已经好了很多。
