手绘风格的数据可视化实现 Sketchify
多少年以前，我在一家BI企业负责数据可视化产品的开发，作为产品创新的需要，一篇论文吸引了我的目光，《 Sketchy Rendering for Information Visualization 》（该论文发表于2013年） 于是我带这两个实习生，利用论文中的知识做出了该工具的原型。收到了领导的赞许，就像很多有用和没用的创新一样，这东西最终无疾而终了。 论文的核心是对基本的图形元素的利用随机变形实现手绘风格。例如线和圆： 最近我发现一些手绘风格图表库出现在我的视野，例如 chart.xkcd 和 chartjs-plugin-rough 。 chart.xkcd风格很好看，但是支持的图表类型有限。 chartjs-plugin-rough仅仅是 chartjs 的扩展，使用的范围也很有限。 我希望能有一个通用的工具能够把任意类型的数据可视化转化为手绘风格，于是开发了这个 Sketchify 。 Sketchify同样是基于 Roughjs ，Roughjs是是个非常强大的手绘风格基础工具，可以实现基本的绘画元素在Canvas和SVG上的手绘风格的实现。 Skethcify的原理非常简单，从一个给定的根DOM元素开始，找到所有的SVG对象，然后递归寻找所有的子元素，读出子元素的基本属性，利用roughjs创建一个手绘风格的元素拷贝，隐藏原始元素