xkcd 是什么？
一系列浪漫、讽刺、数学和语言的网络漫画。
它的网站在这里：https://xkcd.com/
虽然该网站早在2007年就已经在互联网上（英文世界吧）广泛传播了，但我是在2021年通过前端图表库chart.xkcd才闻其大名的。就去翻看了其中的一些漫画。我觉得最好笑的是这一张：
注意到中间的趋势图了吗？
这就是 xkcd 风格的图表，也可以说是手绘风格。
实现原理
（或许是之前很少接触到图表）在无意中于社交媒体上看到 chart.xkcd 之前，我都不知道前端还能实现这种手绘效果，简直太酷了。
那么他是怎么实现的呢？
在我 clone 了该库的源码，研究了一番之后。发现其实原理挺简单的：就是用 D3.js 画图表 + SVG 的 feDisplacementMap 滤镜实现手绘特效。
在使用 feDisplacementMap 滤镜之前，图表是这个样子的，就是很普通的图表：
而加上滤镜之后，就有了最上面那种效果，关键代码在这里：
// 摘录代码经过精简
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...
感受
在我搞懂手绘风格图表的实现原理之后，有一个感受：仅仅是知道/不知道某一个知识点，最后带来的差距还是挺大的。所以我们需要涉猎广泛，乱七八糟的东西知道的大概就行。这些知识未来肯定会给我们带来很大的收益，虽然你那时候可能没意识到。