手绘风格图表库chart.xkcd-xkcd-实现原理/版权声明：本作品采用CreativeCommonsAttribution-Noncommercial-ShareAlike4.0InternationalLicense授权。转载请注明出处！什么是xkcd？以浪漫、讽刺、数学和语言为特色的网络漫画集。它的网站在这里：https://xkcd.com/虽然该网站早在2007年就已经在互联网（英语世界）广泛传播，但我是2021年通过前端图表库chart才听说的。xkcd它的大名。只是看了一些漫画。我认为最有趣的是这个：问：这个词是什么意思？A：没有意义，只是一些随机的字母。注意到中间的趋势图了吗？这是一张xkcd风格的图，也可以说是手绘风格。实现原理（可能之前接触图表很少）之前在社交媒体上无意中看到chart.xkcd，还不知道前端可以实现这种手绘效果，太爽了。那么他是如何实现的呢？在我克隆了库的源代码并研究了一下之后。我发现原理很简单：用D3.js画图表+SVGfeDisplacementMap滤镜实现手绘特效。在使用feDisplacementMap过滤器之前，图表是这样的，这是一个很常见的图表：P.S.文字的效果其实是xkcd-font字体带来的。并且添加filter后会有top效果，关键代码在这里：//摘录代码已经精简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...感觉理解了手绘风格图表的实现原理后，有一种感觉：就是知道/不知道某个知识point,finallybring差距还是蛮大的。所以我们要面面俱到，乱七八糟的东西大概能知道。这些知识在未来肯定会给我们带来很大的好处，虽然你当时可能没有意识到。
