颜值即正义！这几个库颠覆你对数据交互的想象

痛定思痛。 2023-06-19 09:33 12阅读 0赞

## 前言 ##

作为一个对`UI`和动画敏感的切图仔，在日常开发之余，也会关注一些贼好看的图表库和插件。

接下来，我将给大家介绍几款`web/python/vue/react`里漂亮得不行的几个开源库/实现。

![format_png][]

## 1. 手绘风图表库：`roughViz.js` ##

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWt3Z3NlcjIxZzMweGswYmt3bjEuZ2lm][]

基于`D3(v5)`, `roughjs`, 和`handy`。

### 1.1 衡量方式 ###

有三种衡量方式：

粗糙度：  
![format_png 1][]

线条种类：  
![format_png 2][]

线条粗细：  
![format_png 3][]

### 1.2 多种搭配 ###

简答`CDN`:

`npm`:

npm install rough-viz

`react/vue`:

npm install react-roughviz
    npm install vue-roughviz

甚至在`Python`中也可以：

pip install roughviz

### 1.3 简单使用 ###

![format_png 4][]

首先定义两个`div`

之后`new`两个实例：

new roughViz.BarH(
      {
        element: '#vis0',
        title: "Vehicles I've Had",
        titleFontSize: '1.5rem',
        legend: false,
        margin: {top: 50, bottom: 100, left: 160, right: 0},
        data: {
          labels: ['1992 Ford Aerostar Van', '2013 Kia Rio', '1980 Honda CB 125s', '1992 Toyota Tercel'],
          values: [8, 4, 6, 2]
        },
        xLabel: 'Time Owned (Years)',
        strokeWidth: 2,
        fillStyle: 'zigzag-line',
        highlight: 'gold',
      }
    );
    
      new roughViz.BarH(
        {
          element: '#vis1',
          titleFontSize: '1.5rem',
          data: 'https://raw.githubusercontent.com/jwilber/random_data/master/owTanks.csv'
          color: 'tan',
          labels: 'name',
          values: 'health',
          title: "Overwatch Tank Health",
          roughness: 4,
        }
      );

整个的配置非常简洁，其中：

*  `data`: 数据源，支持简单对象或`csv`格式的文件
 *  `roughness`: 线条粗糙混乱层级。如果调成10，就会变成这样：  
    ![format_png 5][]

线上体验`demo`: https://blockbuilder.org/jwilber/419fa6d878fe6c0f79a28f9fc72d7ec6

具体用法请参照官方文档：https://github.com/jwilber/roughViz

## 2. 抖音字体爆炸特效：`react-three-fiber` ##

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXpsajV6ZzMwY24wNGVxZ2kuZ2lm][]

`Web`和`react-native`都可用的高性能`Threejs for react`库。

可以在`React`外部驱动渲染循环，而不会产生额外开销。

最新版本采用了`Hooks`的写法，不像以往强行兼容的`Threejs`,写起来更加友好。

不止抖音字体爆炸特效，它能实现什么，源于你的技术和想象力。

以下一部分特效：

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjJpN2MyZzMwcW8wazd1MHkuZ2lm][]

如果有人学会了…大佬带带？

![format_png 6][]  
抖音爆炸特效的实现：

![format_png 7][]

其中用到一个库：`react-spring`，这是`react`最优秀的动画库，没有之一。

官方文档：https://github.com/react-spring/react-three-fiber

字体爆炸：https://codesandbox.io/s/y3j31r13zz

## 3. 播放器里的颜值担当：`Mini Music Player - VueJS` ##

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjd2NGFwZzMwb2owYnc3d2guZ2lm][]

国外友人写的一个`Vue.js`音乐播放器，好看的不得了。

其中的交互和逻辑，也是非常精炼。

源码：https://codepen.io/JavaScriptJunkie/pen/qBWrRyg

## 4. `UI`都夸好的卡片验证库：`interactive-paycard` ##

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmJpbm9mZzMwbTgwaDJram0uZ2lm][]

这个11月`Vue`新库一发布，就狂揽`3k+`star，过于优秀。

完整库名`vue-interactive-paycard`

`React`版的作者表示也即将发布了。

源码：https://github.com/muhammederdem/vue-interactive-paycard/issues

## 5. 真\*动态可视化数据：`SandDance` ##

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmQ0dGl2ZzMwbTgwZ294NnEuZ2lm][]

**微软出品，必属精品**

`SandDance`是使用`Vega`进行图表布局，使用`Deck.gl`进行`WebGL`渲染。

能在如此密集的数据量上保持动画流畅和美观的，也就微软爸爸能做到了。

我先跪了，你们随意。

此外，该库还有多种使用方式：

1.  `Power BI`软件内使用:
    
     *  `PowerBI`是微软发布的一款数据可视化软件,可以在较短时间内生成各种报表。  
        ![format_png 8][]
2.  `VSCode`插件形式:  
    ![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmlnazhrZzMwc2cwbThuaXEuZ2lm][]
3.  网页版和`React`:  
    ![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnBvbjZ5ZzMwc28wZDNxdjUuZ2lm][]

官网：https://sanddance.js.org/

体验：https://sanddance.js.org/app/

## 6. 实现一个自己的`AR`: `AR.js`\+`Three.js`\+`Autodesk 3D` ##

![format_png 9][]

这是个很有意思的实现，大致流程是：

1.  手机开启浏览器
2.  `AR.js`程序开始
3.  `ARToolKit`识别到图片标记
4.  `A-Frame.js`开始调用`Three.js`渲染3D模型
5.  在画面上显示

![format_png 10][]

### 6.1 实现步骤 ###

#### 1. 查找模型 ####

首先我们先到 `https://sketchfab.com`下载自己喜欢的3D模型

![format_png 11][]

![format_png 12][]

#### 2. 下载3D模型 ####

![format_png 13][]

下载`glTF`格式（`A`框架提供`glTF`，`OBJ`两个格式官网建议使用`glTF`）

#### 3. 创建`index.html`并把这些代码都贴上 ####

*  第1〜3行：把js套件都约会进来
 *  第6行：使用`A-frame`的`html`标签添加一个`a-scene`摄像头并把`AR.js`崁入
 *  第7行：标记`Marker`如果标记的`Marker`出现在摄像头里就会执行下方的事情
 *  第8行：新增你想要跟对方说的话
 *  第9行：新增`3D`模型

#### 4. 部署你的应用。 ####

#### 5. 制作一个可供识别的二维码 ####

![format_png 14][]

#### 6. 制作一张实体卡片 ####

![format_png 15][]

#### 7. 扫一扫 ####

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzhxZXBpZzMwY3UwNzd1MHguZ2lm][]

原文：[AR用AR.js做一個讓另對方 喔喔喔喔! 的小卡片吧!][AR_AR.js_ _]

请欣赏一个价值2199刀的模型  
![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzZrcTl3ZzMxMXowZnFramwuZ2lm][]

还有超赞的《这个杀手不太冷》女孩模型

![aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZ2RibGM0ZzMwcW4wZjZiMmEuZ2lm][]

这也太好看了吧。  
![format_png 16][]

## 4. 后记&引用 ##

原本想凑齐十个再发的，但找了好久，都没什么开源库能入我法眼。

**恳请大家，推荐几款骚得不行的开源库**，我来补充补充，谢谢喇。

![format_png 17][]

## ❤️ 看完三件事 ##

如果你觉得这篇内容对你挺有启发，我想邀请你帮我三个小忙：

1.  点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -\_-）
2.  关注公众号「前端劝退师」，不定期分享原创知识。
3.  也看看其它文章

如果你有对本文有任何的意见或建议，非常欢迎加本人微信一起探讨。

劝退师的微信号是：huab119，备注“csdn”就行

也可以来我的`GitHub`博客里拿所有文章的源文件：

**前端劝退指南**：https://github.com/roger-hiro/BlogFN

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZW51NWZ6ajMwNm8wNm9nbWMuanBn?x-oss-process=image/format,png
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWt3Z3NlcjIxZzMweGswYmt3bjEuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWt3Z3NlcjIxZzMweGswYmt3bjEuZ2lm
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXQyNzJyajMweWQwNXJqeHYuanBn?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXNnM2ZmajMweWQwNXVhY2cuanBn?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXFwNDBiajMwejYwNTRhZHYuanBn?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXZod2tqajMxZnMwcWk3aXQuanBn?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXk1MnUwajMwbW8wb2tuN2MuanBn?x-oss-process=image/format,png
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXpsajV6ZzMwY24wNGVxZ2kuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZXpsajV6ZzMwY24wNGVxZ2kuZ2lm
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjJpN2MyZzMwcW8wazd1MHkuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjJpN2MyZzMwcW8wazd1MHkuZ2lm
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjRubmpwajMwOGMwOGNkanAuanBn?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjVjODdyajMwdXkwOWY3NmQuanBn?x-oss-process=image/format,png
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjd2NGFwZzMwb2owYnc3d2guZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZjd2NGFwZzMwb2owYnc3d2guZ2lm
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmJpbm9mZzMwbTgwaDJram0uZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmJpbm9mZzMwbTgwaDJram0uZ2lm
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmQ0dGl2ZzMwbTgwZ294NnEuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmQ0dGl2ZzMwbTgwZ294NnEuZ2lm
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmd6Z2NiajMxMXkwbGNoM3AuanBn?x-oss-process=image/format,png
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmlnazhrZzMwc2cwbThuaXEuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZmlnazhrZzMwc2cwbThuaXEuZ2lm
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnBvbjZ5ZzMwc28wZDNxdjUuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnBvbjZ5ZzMwc28wZDNxdjUuZ2lm
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMi80LzE2ZWNmZDc0MWJjZGJhNjU?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnE4ZHVtajMwbnIwZzh3Z3AuanBn?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnUwZnlvajMxZ3UwcTAxa3guanBn?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnZvMXZxajMxZ2wwcHZqeXMuanBn?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZnlxYmp3ajMwa3AwYmFteHAuanBn?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzIya3hiajMwdzMwaWw0MmYuanBn?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzN6NDM2ajMwaHUwZTluN2EuanBn?x-oss-process=image/format,png
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzhxZXBpZzMwY3UwNzd1MHguZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzhxZXBpZzMwY3UwNzd1MHguZ2lm
[AR_AR.js_ _]: https://medium.com/%E9%AB%92%E6%A1%B6%E5%AD%90/%E7%94%A8ar-js%E5%81%9A%E4%B8%80%E5%80%8B%E8%AE%93%E5%8F%A6%E5%B0%8D%E6%96%B9-%E5%96%94%E5%96%94%E5%96%94%E5%96%94-%E7%9A%84%E5%B0%8F%E5%8D%A1%E7%89%87%E5%90%A7-4071ceea41dd
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzZrcTl3ZzMxMXowZnFramwuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZzZrcTl3ZzMxMXowZnFramwuZ2lm
[aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZ2RibGM0ZzMwcW4wZjZiMmEuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZ2RibGM0ZzMwcW4wZjZiMmEuZ2lm
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOS8xMi80LzE2ZWNmZjk3OTgxNTkwNGM?x-oss-process=image/format,png
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA2dE5iUndneTFnOWtzZ2ZrNXJwajMwODYwNnA3NmUuanBn?x-oss-process=image/format,png