Hand drawn style chart library chart Implementation principle of xkcd

The author of this article : Lin Shuirong
Github: https://github.com/shuiRong
Link to this article : https://linshuirong.cn/blog/2... Hand drawn style chart gallery chart-xkcd- Realization principle /
Copyright notice : This work adopts Creative Commons signature - Noncommercial use - Share in the same way 4.0 International licensing agreement Licensing . Reprint please indicate the source ！

xkcd What is it? ？

A series of romance 、 irony 、 Mathematics and language Network cartoon .

Its website is here ：https://xkcd.com/

Although the site dates back to 2007 It has been on the Internet since （ English world ） Widely spread , But I was 2021 Through the front-end chart library chart.xkcd Just heard its name . I read some of the cartoons . I think the funniest one is this one ：

Q： What does the word mean ？

A： It doesn't make any sense , Just a few random letters .

Notice the trend chart in the middle ？

This is it. xkcd Style chart , It can also be said to be a hand-painted style .

Realization principle

（ Maybe it's because I haven't touched charts before ） Inadvertently see on social media chart.xkcd Before , I didn't know the front end could still achieve this kind of hand-painted effect , It's so cool .

So how did he achieve that ？

In my clone The source code of the library , After some research . It is found that the principle is actually quite simple ： Just use D3.js Draw a chart + SVG Of feDisplacementMap Filter to achieve hand-painted effects .

In the use of feDisplacementMap Before filter , The chart looks like this , Is a very common chart ：

P.S. The effect of words is xkcd-font Fonts bring .

And after adding the filter , You have the top effect , The key code is in here ：

//  The excerpt code has been simplified 
f.append('feDisplacementMap')
  .attr('scale', '5')
  .attr('in', 'SourceGraphic')

So this one feDisplacementMap What is a filter ？

A lot of , I don't want to explain , It is recommended to read this article directly , Very good ：https://segmentfault.com/a/11...

that D3.js What is it? ？

One is used to operate SVG Powerful JS library , More familiar than we are ECharts Lower level , Therefore, it also means that the system can be set higher , More powerful . Recommend this article ：https://juejin.cn/post/698208...

feel

After I understand the implementation principle of hand drawn style chart , Have a feeling ： Just know / Do not know a certain point of knowledge , In the end, the gap is still very large . So we need to cover a wide range , It's OK to know all the messy things . This knowledge will certainly bring us great benefits in the future , Although you may not have realized at that time .