D3是一个被数据驱动的文档。这篇文章主要介绍了基于 D3.js 绘制动态进度条的方法,需要的朋友可以参考下
D3 是什么
D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的。如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程。
JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ,所以用 JavaScript 也是可以实现所有功能的,但它能大大减小你的工作量,尤其是在数据可视化方面,D3 已经将生成可视化的复杂步骤精简到了几个简单的函数,你只需要输入几个简单的数据,就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。
在网站页面加载以及表单提交时,常使用进度条表达加载过程来优化用户体验,常见的进度条有矩形进度条和圆形进度条,如下图所示:
我们经常使用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() 构造函数即可获得用于绑定在 98953a78f52873edae60a617ec082494 上的路径数据。完整代码如下:
<!--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 添加 98953a78f52873edae60a617ec082494 元素,依据 endAngle() 特性,使用 datum() 方法将 {endAngle:Math.PI} 也就是终点角度 2π 绑定到 98953a78f52873edae60a617ec082494 元素上,并将圆弧构造器赋值给 path 路径 d 。这样就生成了指定背景颜色的圆弧,实际图形如下:
第一个圆弧画好了,那么依据svg的层级关系 z-index ,所谓的进度条其实就是覆盖在第一层圆弧之上的第二层圆弧。同理可得:
var upperGround = picture.append('path') .datum({endAngle:Math.PI / 2}) .style('fill','#FFC125') .attr('d',arcGenerator)
代码运行后可得:
2.圆心处的实时数据展示
第一部分我们已经实现了基于两个 path 的嵌套圆。第二部分我们来实现圆心处的实时数据展示。 在进度条进行加载时,我们在圆心处添加数据来表达当前的加载进度,使用 28f128881ce1cdc57a572953e91f7d0f 标签做展示即可:
var dataText = g.append('text') .text(12) .attr('text-anchor','middle') .attr('dominant-baseline','middle') .attr('font-size','38px')
暂时将数据设置为12,并设置水平居中和垂直居中,效果如下图:
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,那么何谓插值?
概括来说,在给定的离散数据中补插函数,可以使这条连续函数通过全部数据点。举个例子,给定一个p,想实现其背景颜色的从左边红(red)到右边绿(green)的线性渐变,每一区域的色值该如何计算呢?只需:
var compute = d3.interpolate(d3.rgb(255,0,0),d3.rgb(0,255,0));
compute 即为插值函数,参数范围为[0,1],只要你输入该范围内的数字,那么 compute 函数将返回对应的颜色值。这样的插值有什么用呢?可看下图:
假设上图的p长度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)
最终效果如下:
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 类似,是实现改变样式的插值函数。采用链式调用的形式同时对进度条数值和颜色的设置即可。最终实现的效果如下:
综上我们实现了在不同数值下颜色变化的圆形进度条,可常用于告警,提醒等业务场景。
绘制矩形进度条
矩形进度条相比圆形进度条简单了很多,同样基于插值原理,平滑改变矩形的长度即可。直接上代码:
<head> <style> #slider { height: 20px; width: 20px; background: #2394F5; margin: 15px; } </style> </head> <body> <p id='slider'></p> <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绘制进度条的关键点在于插值,从而正确地使图形平滑过渡。如果一定要使用svg或纯css实现矩形和圆形的进度条当然也是可行的,但对于路径和动画的处理,以及css的书写要求都复杂了不少。我们观察到使用D3.js绘制上述两种进度条的逻辑代码几乎完全使用js实现,同时代码量可以控制在20行左右并可封装复用,已经非常精炼了,在自定义图表开发上非常有优势。
对于进度条的衍生版仪表盘图表,相比基础进度条增加了刻度描述和指针计算,但万变不离其宗,只要掌握插值原理和使用,处理类似图表都将得心应手。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
js提取中文拼音首字母的封装工具类_javascript技巧
以上是在D3.js中如何实现动态进度条的详细内容。更多信息请关注PHP中文网其他相关文章!

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制:1.通过Node.js实现服务器端编程,适用于高并发请求处理。2.通过ReactNative进行移动应用开发,支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制,适用于硬件交互。

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能