D3.js + Canvas 绘制组织结构图

D3.js + Canvas 绘制组织结构图

使用 D3.js 默认的 svg 渲染

D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子:

https://bl.ocks.org/mbostock/4339083

使用svg有好有坏:
- 好处是方便操作dom元素, 添加用户交互
- 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿

在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们真的需要渲染大量的数据呢?

使用 D3.js + Canvas 渲染

source code

https://github.com/ssthouse/organization-chart

demo page

https://ssthouse.github.io/organization-chart/#/

上面的demo就是使用 D3.js + Canvas 的方式实现的, 在组织的层数超过300时才会出现明显的卡顿, 能满足大部分的组织结构图的数据.

思路

1. 使用 D3.js的 Three 在 虚拟Dom 中画好图像
2. 使用Canvas绘图 API将 虚拟Dom 中的数据 (坐标 & 线的path) 等绘制到Canvas上
3. 使用 Unique-color 的方式实现Canvas 的用户交互
   
   1. 通过绘制一张和之前 Canvas数据相同的隐藏Canvas, 并给每一个 想要接受用户交互的节点赋予唯一的颜色
   2. 通过监听Canvas点击事件, 获取点击像素的颜色值来判断点击的节点
   3. 该文章中有对该思路的详细介绍: https://medium.com/@lverspohl/how-to-turn-d3-and-canvas-into-good-friends-b7a240a32915

1.使用 D3.js的 Three 在 虚拟Dom 中画好图像

首先调使用D3创建 Tree的虚拟Dom:

this.data = this.d3.hierarchy(data)
this.treeGenerator = this.d3.tree()
  .nodeSize([this.nodeWidth, this.nodeHeight])
let nodes =