「数据可视化库王者」D3.js 极速上手到Vue应用

戳蓝字「 高级前端进阶 」关注我们哦!

D3 近年来一直是  JavaScript 最重要的数据可视化库之一,在创建者  MikeBostock 的维护下,前景依然无量,至少现在没有能打的:

  • D3 与众多其他库的区别在于无限定制的能力(直接操作  SVG )。

  • 它的底层  API 提供对原生  SVG 元素的直接控制,但它也带来了高学习曲线的成本。

  • 我们将把  D3 和  Vue 结合在一起 - 使用  Vue 的动态数据绑定,清晰的语法和模块化结构,可以充分发挥  D3 的最佳性能。  根据广泛定义,D3可拆分为以下几种分库:

  1. 绝大部分的  D3 课程或书籍,都会着重讲解在其  DOM 操作功能上,但这明显与近几年来的web框架理念相违背。

  2. 用于数据可视化的  D3 ,其核心在于使用绘图指令装饰数据,从源数据创建新的可绘制数据,生成  SVG 路径以及从数据和方法在  DOM 中创建数据可视化元素(如轴)的功能。 

  3. 有许多用于管理DOM的工具,所有这些工具都可以在  D3 中集成数据可视化功能。这也是  D3 能与  Vue 无缝结合的原因之一。

于此,我们不需要从 D3 DOM 操作功能开始学起,直接通过实例来入门  D3

D3.js 渐进入门

以下实例的模版均为以下形式:

1. 选择和操作

你需要学习的第一件事是如何使用D3.js选择和操作DOM元素。该库在操作DOM方面实际上非常强大,因此理论上可以将其用作 jQuery 的替代品。 以下代码请逐行添加运行。

2.数据加载和绑定

当你要创建可视化时,了解如何加载数据以及将其绑定到DOM非常重要。所以在这个实例中,你将学到这两点。

3.创建一个简单的柱状图

首先需要添加一个  svg 标签

然后在 index.js 中添加(已添加关键注释):

4. 在图形上方显示数值

这时就需要在上述代码中创建 svg 的  text 文本

过程比较简单,就是返回文本,计算x/y坐标,并填充颜色。

5. scales : 比例尺函数

D3 中有个重要的概念就是比例尺。比例尺就是把一组输入域映射到输出域的函数。映射就是两个数据集之间元素相互对应的关系。比如输入是1,输出是100,输入是5,输出是10000,那么这其中的映射关系就是你所定义的比例尺。

D3 中有各种比例尺函数,有连续性的,有非连续性的,在本例子中,你将学到  d3.scaleLinear()线性比例尺

5.1 d3.scaleLinear() ,线性比例尺

使用 d3.scaleLinear() 创造一个线性比例尺,其中:

  • domain() 是输入域

  • range() 是输出域

  • 相当于将  domain 中的数据集映射到  range 的数据集中。

映射关系:

值得注意的是,上述代码只是 定义了一个映射规则 ,映射的输入值并不局限于  domain() 中的输入域。

于是我们来改造 34 的例子:

然后就会得到以下图形:

6. Axes :轴

轴是任何图表的组成部分,本例子中将会用到上面讲到的比例尺函数。

7. 创建简易的 SVG 元素

在这里面,你会创建  <rect> ,  <circle> 和  <line> 元素

8. 创建饼图

9. 创建折线图

最后,你将学习如何创建折线图以显示近四个月的比特币价格。要获取数据,你将使用外部API。这个项目还将你在整个课程中学到的很多概念结合在一起,所以这是一个很好的可视化课程结束。

以上原实例均来自:Learn D3 for free。scrimba是一个非常神奇的网站。它是使用交互式编码截屏工具构建的。

所有的操作都是:

暂停截屏视频 → 编辑代码 → 运行它!→ 查看更改

非常值得安利一波。接下来进入第二部分: Vue 中使用  D3.js 的正确姿势

2. Vue 中使用  D3.js 的正确姿势

我们将使用 D3 和  Vue 构建一个基本的柱状图组件。网上有一堆例子,但我们将专注于写  Vue ,而不是滥用D3。

1. 安装依赖

首先,我们需要为项目安装依赖项。我们可以简单地安装和使用 D3 整库:

但我在前面讲到,实际上 D3 是几个分库的集合,考虑到项目的优化,我们只安装所需的模块。

使用 VueCli 初始化项目即可。

2. 创建柱状图

3. 柱状图模块导入

4. 创建 svg 元素

Vue 数据响应的特性,我们不需要用到  D3 操作  DOM 的那套链式创建。

5. 数据与窗口大小响应

在  mounted 钩子中,我们将为窗口调整大小事件添加一个监听器,它将触发绘制动画,并将  <svg> 大小设置为新窗口的比例。我们不会立即渲染,而是等待  300 毫秒,以确保完全调整窗口大小。

以下是完整的 BarChart.vue ,请配合注释食用:

我们将从父组件 App.vue 获取数据:

这时候 yarn run serve 后将会看到:

好像还缺点显示数值,考虑到该图高度是根据比例尺生成,我们调整下y坐标:

AnimateLoad() 末尾添加:

最后在 <g> 元素中添加:

3. 参考文章

  • D3 is not a Data Visualization Library

  • D3中常用的比例尺

  • D3 vs G2 vs Echarts

  • Dynamic Data Visualizations With Vue.js and D3

4. 总结

该库几乎凭 MikeBostock 一人之力完成,且在学术界、专业团队中享有极大声誉。

  • D3 更接近底层,与  g2 、  echarts 不同,  d3 能直接操作  svg ,所以拥有极大的自由度,几乎可以实现任何 2d 的设计需求。

  • 正如其名  DataDrivenDocuments ,其本质是将数据与  DOM 绑定,并将数据映射至  DOM 属性上。

  • D3 长于可视化,而不止于可视化,还提供了  数据处理 、  数据分析 、  DOM 操作等诸多功能。

  • 如果有想深耕数据可视化方面的前端,  D3 不得不学。

掌握  D3 后,限制作品水平的只会是想象力而不再是技术。

源码地址:点这里

作者掘金文章总集

需要转载到公众号的喊我加下白名单就行了。

  • 「真®全栈之路」Web前端开发的后端指南

  • 「Vue实践」5分钟撸一个Vue CLI 插件

  • 「Vue实践」武装你的前端项目

  • 「中高级前端面试」JavaScript手写代码无敌秘籍

  • 「从源码中学习」面试官都不知道的Vue题目答案

  • 「从源码中学习」Vue源码中的JS骚操作

  • 「从源码中学习」彻底理解Vue选项Props

  • 「Vue实践」项目升级vue-cli3的正确姿势

  • 为何你始终理解不了JavaScript作用域链?

:heart: 看完三件事

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

  1. 点个 「在看」 ,让更多的人也能看到这篇内容( 喜欢不点在看,都是耍流氓 -_-

  2. 关注我的 GitHub:github.com/yygmind ,让我们成为长期关系

  3. 关注公众号「高级前端进阶」, 每周重点攻克一个前端面试重难点 ,公众号后台回复「面试题」 送你高级前端面试题。

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章