<head> <style> #slider { height: 20px; width: 20px; background: #2394F5; margin: 15px; } </style> </head> <body> <div></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绘制进度条的关键点在于插值，从而正确地使图形平滑过渡。如果一定要使用svg或纯css实现矩形和圆形的进度条当然也是可行的，但对于路径和动画的处理，以及css的书写要求都复杂了不少。我们观察到使用D3.js绘制上述两种进度条的逻辑代码几乎完全使用js实现，同时代码量可以控制在20行左右并可封装复用，已经非常精炼了，在自定义图表开发上非常有优势。
对于进度条的衍生版仪表盘图表，相比基础进度条增加了刻度描述和指针计算，但万变不离其宗，只要掌握插值原理和使用，处理类似图表都将得心应手。
以上所述是小编给大家介绍的基于 D3.js 绘制动态进度条的实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: