什么是D3

D3的全称是(数据驱动文档)。顾名思义，D3是一个数据驱动的文档。听名字有点抽象，简单来说，其实就是一个JavaScript函数库，主要用于数据可视化。如果你不知道JavaScript是什么，请先学习JavaScript，推荐阮一峰的教程。

JavaScript文件的后缀名称通常是。js，所以D3常被称为D3.js D3提供了各种简单易用的函数，大大简化了JavaScript数据操作的难度。因为本质上是JavaScript，所以所有的功能都可以用JavaScript来实现，但是可以大大减少你的工作量，尤其是在数据可视化方面。D3把生成可视化的复杂步骤简化成了几个简单的函数，你只需要输入几个简单的数据，就可以转换成各种华丽的图形。有过JavaScript基础的朋友一定很容易理解。

在加载网站页面和提交表单时，进度条通常用于表示加载过程，以优化用户体验。常见的进度条包括矩形进度条和圆形进度条，如下图所示：

我们经常使用svg或canvas来绘制动态图形，但绘制过程相对复杂。对于直观美观的进度条，社区还提供了highways/e Charts等成熟方案。但基于配置的开发方法终究无法实现100%的自定义绘图。本文将向您展示如何使用D3.js逐步实现动态进度条，并分享代码逻辑的原理。

基本要求

了解svg如何绘制基本图形，了解D3.js v4版本，了解如何使用D3.js (v4)绘制svg的基本图形，绘制圆形进度条

对于圆形进度条，我们首先拆分它的任务：

在嵌套圆弧中心绘制实时数据显示，展示动画美化1。绘制嵌套弧

对于圆，svg提供了现成的圆标签供使用，但其缺点是对于圆进度条使用圆就可以满足，但当图形进一步扩展，比如画半圆时，圆的处理就比较棘手。D3.js提供的圆弧相关API封装了圆的绘制方法：

var arc=d3.arc()。内半径(180)。外半径(240) //。startAngle(0) //。数学。PI)arc()；//'m0，-100a100，100，0，0，1，100，0l0，0z '以上代码实现了两个嵌套圆的绘制逻辑，d3.arc()返回一个圆弧构造函数，通过链式调用设置内圆和外圆的半径、起始角和终止角。执行arc()构造函数获取路径数据，以便在路径上进行绑定。完整的代码如下：

！- html - svg宽度='960 '高度=' 500 '/SVG script var arcGenerator=D3 . arc()。内半径(80)。外半径(100)。startAngle(0)；var picture=d3.select('svg ')。追加(' g ')。attr('transform '，' translate(480，250)')；/script上面的代码实现了两个步骤：

1.生成以0度为起点的弧构造器弧生成器

2.设置变换图形偏移，使图形位于画布的中心

目前画布上没有元素，我们来画实际的图形。

var backGround=picture . append(' path ')。数据({endAngle: 2 * Math。PI})。样式('填充'，' #FDF5E6 ')。attr('d '，arc generator)；我们给画布图片添加一个路径元素，绑定{ endAngle:Math。PI}，即endAngle 2，根据endAngle()的特性，使用datum()方法分配给路径元素，并为路径d分配圆弧构造函数，这样就生成了一个指定背景颜色的圆弧，实际图如下：

绘制完第一条弧后，根据svg的层次关系z-index，所谓的进度条其实就是覆盖第一层弧的第二层弧。以同样的方式：

可变上限=图片。追加('路径')。数据({ endangle : path . pi/2 })。样式('填充'，' # ffc125 ')。attr ('d '，arcgenerator)代码可以在运行后获得：

2.实时数据显示在圆心

在第一部分中，我们实现了基于两条路径的嵌套圆。第二部分实现了圆心处的实时数据显示。加载进度条时，我们在圆心处添加数据来表示当前的加载进度，并使用文本标签来显示：

Var datatext=g. append ('text ')。正文(12)。attr('文本锚'，'中间')。attr('优势基线'，'中间')。attr ('font-size '，' 38px ')临时存储数据

3.显示动画

我们已经通过两个部分知道了：1和2:

绘制进度条的本质是改变上圆弧的角度。当弧度为2时，就是一整圈。当弧度为时，半圆中的数据是当前弧度相对于2的百分比。综上所述，我们可以通过改变弧度值和数值以及设置改变过程所需的时间来实现所谓的“动画”。在ECharts提供的官方示例中，数据通过setInterval定期更新。事实上，D3.js中也提供了类似的方法来实现类似setInterval的功能：

d3.interval(function(){前台. transition()。持续时间(750)。在(' d '之间，函数(d){ var compute=D3 . interpole(d . endangle，Math.random() * Math。PI * 2)；返回函数(t){ d . endangle=compute(t)；返回电弧发生器(d)；} })}，1000)分解这个代码：

方法d3.interval()提供了setInterval()的函数。selection.transition.duration()设置当前DOM属性转换为指定DOM属性所需的时间，单位为毫秒。transation.attrTween是插值API，那么什么是插值呢？总而言之，通过在给定的离散数据中插值一个函数，这个连续函数可以通过所有的数据点。比如给定一个div，为了实现其背景颜色从左边红色到右边绿色的线性渐变，应该如何计算每个区域的颜色值？只是：

var compute=D3 . interpole(D3 . RGB(255，0，0)，d3.rgb(0，255，0))；Compute为插值函数，参数范围为[0，1]。只要输入这个范围内的数字，计算函数就会返回相应的颜色值。这样的插值有什么用？见下图：

假设上图中的div长宽为100，将[0，100]按比例转换为[0，10]的范围数据，输入计算函数，即可得到某一区域对应的颜色。当然，对于线性区域处理，我们不应该使用离散数据作为输入输出，所以D3.js提供了更方便的线性梯度API d3.linear，这里不再赘述。

言归正传，代码D3。插值(d. endangle，数学。random () *数学。pi * 2)；实现了以下插值范围：

['当前角度值'，'随机角度值']//表示区间而不是数组

然后返回一个参数为t的函数，那么这个函数是什么呢？

t参数类似于d，是D3.js内部实现的插值，范围为[0，1]。t参数根据设定的时长()，自动计算出[0，1]内合适的插值个数，并返回插值结果，从而实现线性稳定的过渡动画效果。

完成滚动条的动画加载效果，然后写出圆心实时数据的变化逻辑，只要简单赋值就可以实现，完整代码如下：

d3.interval(function(){前台. transition()。持续时间(750)。在(' d '之间，函数(d){ var compute=D3 . interpole(d . endangle，Math.random() * Math。PI * 2)；返回函数(t){ d . endangle=compute(t)；var数据=d.endAngle/Math。PI/2 * 100；//设置值d3.select ('text ')。text(data . to fixed(0)“%”)；//传入新参数生成新的arc构造函数，返回arc generator(d)；} }) }，2000)最终效果如下：

美化

在第1、2、3部分，我们实现了进度条最基本的样式和功能，但是样式看起来还是比较单调。接下来，我们在进度条上进行线性渐变处理。我们使用D3.js提供的线性插值API:

var colorLinear=d3.scaleLinear()。域([0，100])。范围(['#EEE685 '，' # ee3b 3b '])；颜色线性也是一个插值函数。如果我们在区间[0，100]中输入值，我们将返回相应区间['#EEE685 '，' #EE3B3B']中的颜色值。例如，当进度条显示进度为“80%”时：

var color=color linear(80)；//color指的是实现了‘80%’对应的颜色值后，我们只需要在进度条变化时改变原来的颜色即可：

d3.interval(function(){前台. transition()。持续时间(750)。在(' d '之间，函数(d){ var compute=D3 . interpole(d . endangle，Math.random() * Math。PI * 2)；返回函数(t){ d . endangle=compute(t)；var数据=d.endAngle/Math。PI/2 * 100；//设置值d3.select ('text ')。text(data . to fixed(0)“%”)；//传入新参数生成新的arc构造函数，返回arc generator(d)；} }) .styleTween('fill '，function(d){ return function(t){ var data=d . endangle/Math。PI/2 * 100；//返回数值对应的颜色值返回colorLinear(数据)；} }) }，2000)styleTween类似于attrTween，是一个用于改变样式的插值函数。以链调用的形式同时设置进度条的值和颜色。最终效果如下：

综上所述，我们实现了不同数值下颜色变化的圆形进度条，可以经常用于报警、提醒等业务场景。

绘制矩形进度条

矩形进度条比圆形进度条简单很多，基于插值原理，矩形的长度可以平滑变化。直接编码：

头部样式#滑块{ height: 20px宽度： 20px；背景# 2394F5margin: 15px}/style/head body div id=' slider '/div script D3 . interval(function(){ D3 . select(' # slider ')。过渡()。持续时间(1000)。attrTween('width '，function(){ var I=D3 . interpole(20，400)；var ci=D3 . interpole(' # 2394 F5 '，' # BDF 436 ')；变量=这个；返回函数(t){ that . style . width=I(t)' px '；that . style . background=ci(t)；};});}，1500)/脚本/正文具有以下效果：

摘要

基于D3.js绘制进度条的关键点是插值，这样才能使图形平滑正确的过渡。用svg或者纯css实现矩形和圆形进度条当然是可行的，但是路径和动画的处理以及css的编写要求比较复杂。我们观察到，用D3.js绘制上述两种进度条的逻辑代码几乎完全是用js实现的，代码量可以控制在20行左右，并且可以打包复用，已经非常精细了，在自定义图表的开发上有很大的优势。

与基本进度条相比，比例尺描述和指针计算被添加到从进度条导出的仪表板图表中。但是，只要你掌握了插值原理和使用，你就会对类似的图表感到舒服。

以上是边肖介绍的基于D3.js绘制动态进度条的例子的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！