D3.js + Canvas 绘制组织结构图
使用 D3.js 默认的 svg 渲染
D3默认的树状图画图使用的是svg
使用svg有好有坏:
好处是方便操作dom元素, 添加用户交互
坏处是渲染效率不高..., 在数据量较大时页面易掉帧, 卡顿
在大多数数据量不是特别大情况下, 使用svg的好处是远远盖过坏处的,但如果我们真的需要渲染大量的数据呢?...or…
上面的demo就是使用 D3.js + Canvas 的方式实现的, 在组织的层数超过300时才会出现明显的卡顿, 能满足大部分的组织结构图的数据....的方式实现Canvas 的用户交互
通过绘制一张和之前 Canvas数据相同的隐藏Canvas, 并给每一个 想要接受用户交互的节点赋予唯一的颜色
通过监听Canvas点击事件, 获取点击像素的颜色值来判断点击的节点...使用 Unique-color 的方式实现Canvas 的用户交互
下图中可以看到, 实际上是有两张Canvas的, 其中下面的Canvas除了的节点颜色不同外, 和上面的Cavans绘制的数据完全相同