手绘风格图表库chart.xkcd 实现原理

本文作者: 林水溶
Github: https://github.com/shuiRong
本文链接: https://linshuirong.cn/blog/2...手绘风格图表库chart-xkcd-实现原理/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

xkcd 是什么？

一系列浪漫、讽刺、数学和语言的网络漫画。

它的网站在这里：https://xkcd.com/

虽然该网站早在2007年就已经在互联网上（英文世界吧）广泛传播了，但我是在2021年通过前端图表库chart.xkcd才闻其大名的。就去翻看了其中的一些漫画。我觉得最好笑的是这一张：

Q：这个词是什么意思？

A：没有任何意义，就是随意的几个字母而已。

注意到中间的趋势图了吗？

这就是 xkcd 风格的图表，也可以说是手绘风格。

实现原理

（或许是之前很少接触到图表）在无意中于社交媒体上看到 chart.xkcd 之前，我都不知道前端还能实现这种手绘效果，简直太酷了。

那么他是怎么实现的呢？

在我 clone 了该库的源码，研究了一番之后。发现其实原理挺简单的：就是用 D3.js 画图表 + SVG 的 feDisplacementMap 滤镜实现手绘特效。

在使用 feDisplacementMap 滤镜之前，图表是这个样子的，就是很普通的图表：

P.S.文字的效果其实是xkcd-font字体带来的。

而加上滤镜之后，就有了最上面那种效果，关键代码在这里：

// 摘录代码经过精简
f.append('feDisplacementMap')
  .attr('scale', '5')
  .attr('in', 'SourceGraphic')

那这个 feDisplacementMap 滤镜是什么呢？

一大堆，不想解释了，直接推荐看这篇文章吧，讲挺好：https://segmentfault.com/a/11...

那么 D3.js 是什么呢？

一个用来操作 SVG 的强大的JS库，比我们更熟知的 ECharts 更底层，因此也意味着可定制度更高，更强大。推荐这篇文章：https://juejin.cn/post/698208...

感受

在我搞懂手绘风格图表的实现原理之后，有一个感受：仅仅是知道/不知道某一个知识点，最后带来的差距还是挺大的。所以我们需要涉猎广泛，乱七八糟的东西知道的大概就行。这些知识未来肯定会给我们带来很大的收益，虽然你那时候可能没意识到。