体验：http://cp.maqib.cn/ 对于程序员来说，每天除了写代码，接触较多的可能是各种图表了，诸如流程图、原型图、拓扑图、UML 图以及思维导图等等，我们较为熟悉的是 ProcessOn了

前段时间，网易云音乐上线了一个基于熟人社交投票玩法的 h5 活动，本文主要介绍了该活动是如何基于矩形树图算法来实现一个无缝挤压动效以及在这其中遇到的一些问题。

工作和生活中我们会经常碰到矩形树图，下面两张图相信大家不会陌生。 最近刚好接到一个需求，绘制门诊疾病的矩形树图（如下图），虽然 echart, d3等框架都有相关的实现，但是对其实现还是蛮好奇的，遂深入研究了一下其实现原理。接下来会从布局算法，颜色填充和canvas 事件系统三…

由于公司业务需求，需要开发一个展示组织架构的树组件（公司的项目是基于Vue）。在GitHub上找了半天，这类组件不多，也没有符合业务需求的组件，所以决定自己造轮子！ 那么，问题来了。递归组件怎么写？ 至此，一个简单的组织架构树组件就完成了。 然而，事情还远远没有结束。。。 我们…

如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。

1. 首先画矩形框 2. 画圆圈 3. 画连线 只要有水平和垂直两种布局，于是连线也有两种。 4. 写文字 5. 判断鼠标在当前区域内 6. 处理数据 按照以上思路，图，画出来了。 但是也遇到了其他的问题。 1. 图形拾取 即是当前鼠标在哪个图形上面，虽然canvas的API提…

上面的demo就是使用 D3.js + Canvas 的方式实现的, 在组织的层数超过300时才会出现明显的卡顿, 能满足大部分的组织结构图的数据. 上面的变量 nodes 和 links 现在就包含了结构图中每个 组织节点 和 连接线 的坐标信息. 2. 使用Canvas绘图…

前言 大家好！ 我是热爱图形的fly, 之前在群里和粉丝讨论canvas 如何实现事件系统， 然后呢？ 我自己其实也对这个比较感兴趣， 我看过很多canvas 实现的项目， 比如canvas 实现思维

前言 大家好，我是林三心，回想起我当年校招的时候啊，多次被面试官问到canvas，但是我却不会，后来一直想找个机会学一下canvas，但是一直没时间。canvas在前端的地位是越来越重要了，为此，我特