基于 D3.js 绘制动态进度条的实例详解


Posted in Javascript onFebruary 26, 2018

D3 是什么

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

JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。

在网站页面加载以及表单提交时,常使用进度条表达加载过程来优化用户体验,常见的进度条有矩形进度条和圆形进度条,如下图所示:

基于 D3.js 绘制动态进度条的实例详解 

我们经常使用svg或canvas来实现动态图形的绘制,但绘制过程相对较繁琐。对于直观漂亮的进度条,社区也有提供成熟的方案例如highcharts/ECharts等等,但基于配置的开发方式终究无法实现100%的自定义绘制。本文将带你使用D3.js从零一步一步实现动态进度条,并分享代码逻辑原理。

基础要求

  • 了解svg如何绘制基础图形
  • 了解D3.js v4版本
  • 了解如何使用D3.js (v4)绘制svg的基础图形

绘制圆形进度条

对于一个圆形进度条,我们先对其进行任务拆分:

  • 绘制嵌套圆弧
  • 圆心处的实时数据展示
  • 展现动画
  • 美化

1.绘制嵌套圆弧

对于圆形,svg提供现成的 circle 标签供使用,但是其劣势在于,对于圆形进度条使用 circle 可以满足,但对图形进一步扩展时比如绘制半圆, circle 的处理就棘手了。D3.js提供 arc 相关API对圆形的绘制方法进行了封装:

var arc = d3.arc()
   .innerRadius(180)
   .outerRadius(240)
   //.startAngle(0)
   //.endAngle(Math.PI)
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"

上述代码实现了对两个嵌套圆的绘制逻辑, d3.arc() 返回一个圆弧构造函数,并通过链式调用设置内圆与外圆的半径大小,起始角度与结束角度。执行 arc() 构造函数即可获得用于绑定在 <path> 上的路径数据。完整代码如下:

<!--html-->
<svg width="960" height="500"></svg>
<script>
 var arcGenerator = d3.arc().innerRadius(80).outerRadius(100).startAngle(0);
 var picture = d3.select('svg').append('g').attr('transform','translate(480,250)');
</script>

上述代码实现了2个步骤:

1.生成将0度作为起点的圆弧构造器 arcGenerator

2.设置 transform 图形偏移量,令图形在画布中央

目前画布上还没有任何元素,接下来我们实际图形的绘制。

var backGround = picture.append("path")
  .datum({endAngle: 2 * Math.PI})
  .style("fill", "#FDF5E6")
  .attr("d", arcGenerator);

我们对画布 picture 添加 <path> 元素,依据 endAngle() 特性,使用 datum() 方法将 {endAngle:Math.PI} 也就是终点角度 2π 绑定到 <path> 元素上,并将圆弧构造器赋值给 path 路径 d 。这样就生成了指定背景颜色的圆弧,实际图形如下:

基于 D3.js 绘制动态进度条的实例详解

第一个圆弧画好了,那么依据svg的层级关系 z-index ,所谓的进度条其实就是覆盖在第一层圆弧之上的第二层圆弧。同理可得:

var upperGround = picture.append('path')
  .datum({endAngle:Math.PI / 2})
  .style('fill','#FFC125')
  .attr('d',arcGenerator)

代码运行后可得:

基于 D3.js 绘制动态进度条的实例详解 

2.圆心处的实时数据展示

第一部分我们已经实现了基于两个 path 的嵌套圆。第二部分我们来实现圆心处的实时数据展示。 在进度条进行加载时,我们在圆心处添加数据来表达当前的加载进度,使用 <text> 标签做展示即可:

var dataText = g.append('text')
  .text(12)
  .attr('text-anchor','middle')
  .attr('dominant-baseline','middle')
  .attr('font-size','38px')

暂时将数据设置为12,并设置水平居中和垂直居中,效果如下图:

基于 D3.js 绘制动态进度条的实例详解 

3.展现动画

通过1,2两部分内容我们已经知道了:

  • 绘制进度条的实质是改变上层弧的角度
  • 当弧度是 2π 时为整圆,当弧度是 π 时为半圆
  • 圆形中的数据即为当前弧度相对 2π 的百分比

综上我们只要改变弧度值和数值同时设定改变过程所需时长即可实现所谓"动画"。在ECharts提供的官方实例中,通过 setInterval 来实现每隔固定一段时间进行数据更新,其实在D3.js中同样提供了类似方法来实现类似 setInterval 的功能:

d3.interval(function(){
 foreground.transition().duration(750).attrTween('d',function(d){
  var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
  return function(t){
   d.endAngle = compute(t);
   return arcGenerator(d);
  }
  
 })
},1000)

对这段代码进行拆解:

  • d3.interval() 方法提供了 setInterval() 的功能
  • selection.transition.duration() 设置了当前DOM属性过渡变化为指定DOM属性的过程所需时间,毫秒为单位
  • transation.attrTween 为插值功能API,那么何谓插值?

概括来说,在给定的离散数据中补插函数,可以使这条连续函数通过全部数据点。举个例子,给定一个div,想实现其背景颜色的从左边红(red)到右边绿(green)的线性渐变,每一区域的色值该如何计算呢?只需:

var compute = d3.interpolate(d3.rgb(255,0,0),d3.rgb(0,255,0));

compute 即为插值函数,参数范围为[0,1],只要你输入该范围内的数字,那么 compute 函数将返回对应的颜色值。这样的插值有什么用呢?可看下图:

基于 D3.js 绘制动态进度条的实例详解 

假设上图的div长度width为100,那么将[0,100]依比例关系转化为[0,10]的范围数据并输入 compute 函数中,即可得到某一区域对应的颜色。当然,对于线性面积的处理我们不应该使用离散数据作为输入和输出,所以D3.js提供更方便的线性渐变API d3.linear 等,这里就不展开描述了。

言归正传,代码 d3.interpolate(d.endAngle,Math.random() * Math.PI * 2); 实现了如下插值范围:

["当前角度值","随机角度值"] //表达区间而非数组

而后返回一个参数为 t 的函数,那么该函数的作用是什么呢?

t 参数与 d 类似,是D3.js内部实现的插值,其范围为[0,1]。 t 参数根据设置的 duration() 时长自动计算在[0,1]内合适的插值数量,并返回插值结果,实现线性平稳的过渡动画效果。

完成滚动条的动画加载效果,我们接下来写圆心实时数据的变化逻辑,只要实现简单的赋值即可,完整代码如下:

d3.interval(function(){
  foreground.transition().duration(750).attrTween('d',function(d){
   var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
   return function(t){
    d.endAngle = compute(t);
    var data = d.endAngle / Math.PI / 2 * 100;
    //设置数值
    d3.select('text').text(data.toFixed(0) + '%');
    //将新参数传入,生成新的圆弧构造器
    return arcGenerator(d);
   }
  })
 },2000)

最终效果如下:

基于 D3.js 绘制动态进度条的实例详解 

4.美化

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

var colorLinear = d3.scaleLinear().domain([0,100]).range(["#EEE685","#EE3B3B"]);

colorLinear 同样是一个插值函数,我们输入[0,100]区间中的数值,就会返回对应["#EEE685","#EE3B3B"]区间内的颜色值。比如当进度条显示进度为"80%"时:

var color = colorLinear(80);
//color即为"80%"对应的色值

实现了颜色取值后,我们只需在进度条变化时,将原有颜色改变即可:

d3.interval(function(){
  foreground.transition().duration(750).attrTween('d',function(d){
   var compute = d3.interpolate(d.endAngle,Math.random() * Math.PI * 2);
   return function(t){
    d.endAngle = compute(t);
    var data = d.endAngle / Math.PI / 2 * 100;
    //设置数值
    d3.select('text').text(data.toFixed(0) + '%');
    //将新参数传入,生成新的圆弧构造器
    return arcGenerator(d);
   }
  })
  .styleTween('fill',function(d){
   return function(t){
    var data = d.endAngle / Math.PI / 2 * 100;
    //返回数值对应的色值
    return colorLinear(data);
   }
  })
 },2000)

styleTween 与 attrTween 类似,是实现改变样式的插值函数。采用链式调用的形式同时对进度条数值和颜色的设置即可。最终实现的效果如下:

基于 D3.js 绘制动态进度条的实例详解 

综上我们实现了在不同数值下颜色变化的圆形进度条,可常用于告警,提醒等业务场景。

绘制矩形进度条

矩形进度条相比圆形进度条简单了很多,同样基于插值原理,平滑改变矩形的长度即可。直接上代码:

<head>
 <style>
  #slider {
   height: 20px;
   width: 20px;
   background: #2394F5;
   margin: 15px;
  }
 </style>
</head>
<body>
 <div id='slider'></div>
 <script>
  d3.interval(function(){
   d3.select("#slider").transition()
    .duration(1000)
    .attrTween("width", function() {
     var i = d3.interpolate(20, 400);
     var ci = d3.interpolate('#2394F5', '#BDF436');
     var that = this;
     return function(t) {
      that.style.width = i(t) + 'px';
      that.style.background = ci(t);
     };
    });
  },1500)
 </script>
</body>

实现的效果如下:

基于 D3.js 绘制动态进度条的实例详解 

总结

基于D3.js绘制进度条的关键点在于插值,从而正确地使图形平滑过渡。如果一定要使用svg或纯css实现矩形和圆形的进度条当然也是可行的,但对于路径和动画的处理,以及css的书写要求都复杂了不少。我们观察到使用D3.js绘制上述两种进度条的逻辑代码几乎完全使用js实现,同时代码量可以控制在20行左右并可封装复用,已经非常精炼了,在自定义图表开发上非常有优势。

对于进度条的衍生版仪表盘图表,相比基础进度条增加了刻度描述和指针计算,但万变不离其宗,只要掌握插值原理和使用,处理类似图表都将得心应手。

以上所述是小编给大家介绍的基于 D3.js 绘制动态进度条的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
vue实现模态框的通用写法推荐
Feb 26 #Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 #Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 #Javascript
详解Node 定时器
Feb 26 #Javascript
node.js基础知识小结
Feb 26 #Javascript
Es6 Generator函数详细解析
Feb 24 #Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
You might like
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
33道php常见面试题及答案
2015/07/06 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
js文字滚动停顿效果代码
2008/06/28 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
使用Python对Access读写操作
2017/03/30 Python
Django的信号机制详解
2017/05/05 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python实现剪切功能
2019/01/23 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
采购助理岗位职责
2014/02/16 职场文书
市场营销求职信范文
2014/02/21 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
小学教师节活动总结
2015/03/20 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python一些基本的图像操作和处理总结
2021/06/23 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python