D3.js实现简洁实用的动态仪表盘的示例


Posted in Javascript onApril 04, 2018

本文介绍了D3.js实现简洁实用的动态仪表盘的示例,分享给大家,具体如下:

动态效果图:

D3.js实现简洁实用的动态仪表盘的示例

仪表盘效果图

细看上面的动态效果图,可以发现:

  1. 一个值变换到一个新的值时,是一个渐变的过程;
  2. 圆弧末尾有一个竖线,作为仪表盘的指针,在仪表盘数值变化时,有一个弹性的动画效果。

一开始,我是用Echarts来实现仪表盘,但是它无法满足上面的两点需求。所以后来改成用D3.js。

D3.js可以完美地实现图表的定制,从细节上,完美地满足我们的需求。

初始化仪表盘

1、首先定义一个svg元素:

<svg id="myGauge" width="80" height="108" ></svg>

然后,声明一些变量用于初始化:

var width=80, 
  height=108,  //svg的高度和宽度,也可以通过svg的width、height属性获取
  innerRadius = 22,
  outerRadius = 30, //圆弧的内外半径
  arcMin = -Math.PI*2/3,
  arcMax = Math.PI*2/3, //圆弧的起始角度和终止角度

2、创建一个 arc 方法,并设置所有的属性,除了 endAngle。在创建圆弧的时候,传递一个包含 endAngle 属性的对象到这个方法,就可以计算出一个给定角度的 SVG path。

var arc = d3.arc()
  .innerRadius(22)
  .outerRadius(30)
  .startAngle(arcMin)

圆弧角度怎么设置呢?

把一个圆圈对应到一个时钟,那么12点钟对应的角度就是0,顺时针3点钟的角度是Math.PI/2,逆时针6点钟的角度是-Math.PI。因此-Math.PI*2/3到Math.PI*2/3的圆弧形状如上面的效果图所示。更多参考API文档中的arc.startAngle。

3、获取SVG元素,并且转换原点到画布的中心,这样我们在之后创建圆弧时就不需要再单独指定它们的位置了

var svg = d3.select("#myGauge")
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

4、添加仪表盘中的文字(标题,数值,单位)

//添加仪表盘的标题
g.append("text").attr("class", "gauge-title")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点,居中
  .attr("y", -45)  //到中心的距离
  .text("CPU占用率");
//添加仪表盘显示的数值,因为之后还要更新,所以声明一个变量
var valueLabel = g.append("text").attr("class", "gauge-value")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点,居中
  .attr("y", 25)  //到中心的距离
  .text(12.65); 
//添加仪表盘显示数值的单位      
g.append("text").attr("class", "gauge-unity")
  .style("alignment-baseline", "central") //相对父元素对齐方式
  .style("text-anchor", "middle") //文本锚点,居中
  .attr("y", 40)  //到中心的距离
  .text("%");

D3制作的SVG图,与Echarts绘制的Canvas比起来,很重要的一个优点是,可以用CSS定义SVG的样式。比如,此处仪表盘标题的样式如下:

.gauge-title{
  font-size: 10px;
  fill: #A1A6AD;
}

5、添加背景圆弧

//添加背景圆弧
var background = g.append("path")
  .datum({endAngle:arcMax}) //传递endAngle参数到arc方法
  .style("fill", "#444851")
  .attr("d", arc);

6、添加表示百分比的圆弧,其中percentage是要表示的百分比,0到1的小数。

//计算圆弧的结束角度
var currentAngle = percentage*(arcMax-arcMin) + arcMin
//添加另一层圆弧,用于表示百分比
var foreground = g.append("path")
  .datum({endAngle:currentAngle})
  .style("fill", "#444851")
  .attr("d", arc);

7、在圆弧末尾添加一个指针标记

var tick = g.append("line")
  .attr('class', 'gauge-tick')
  .attr("x1", 0)
  .attr("y1", -innerRadius)
  .attr("x2", 0)
  .attr("y2", -(innerRadius + 12)) //定义line位置,默认是在圆弧正中间,12是指针的长度
  .style("stroke", "#A1A6AD")
  .attr('transform', 'rotate('+ angleToDegree(currentAngle) +')')

rotate中的参数是度数,Math.PI对应180,因此需要自定义一个angleToDegree方法把currentAngle转换一下。

至此,一个SVG仪表盘就制作出来了,不过是静止的,那怎么更新这个仪表盘呢?

更新仪表盘

需要更新:表示新的百分比的圆弧;圆弧下方的数值。

修改圆弧下方的数值很简单:

valueLabel.text(newValue)

更新圆弧则稍麻烦一点,具体思路是:修改圆弧的endAngle,以及修改圆弧末尾指针的transform值。

实现的过程中,需要使用的API:

selection.transition:https://github.com/d3/d3-transition/blob/master/README.md#selection_transition
transition.attrTween:https://github.com/d3/d3-transition/blob/master/README.md#transition_attrTween
d3.interpolate:https://github.com/d3/d3-interpolate/blob/master/README.md#interpolate

1、更新圆弧,其中angle为新圆弧的结束角度。

//更新圆弧,并且设置渐变动效
foreground.transition()
  .duration(750)
  .ease(d3.easeElastic)  //设置来回弹动的效果
  .attrTween("d", arcTween(angle));

arcTween方法定义如下。它返回一个d属性的补间(渐变)动画方法,使一个圆弧从当前的角度渐变到另一个新的角度。

arcTween(newAngle) {
  let self=this
  return function(d) {
    var interpolate = d3.interpolate(d.endAngle, newAngle); //在两个值间找一个插值
    return function(t) {
      d.endAngle = interpolate(t);  //根据 transition 的时间 t 计算插值并赋值给endAngle
      return arc(d); //返回新的“d”属性值
    }; 
  };
}

这个方法更详细的说明可以参考Arc Tween中的注释。

2、更新圆弧末尾的指针的原理同上,其中oldAngle是旧圆弧的结束角度。

//更新圆弧末端的指针标记,并且设置渐变动效      
tick.transition()
  .duration(750)
  .ease(d3.easeElastic)  //设置来回弹动的效果
  .attrTween('transform', function(){ //设置“transform”属性的渐变,原理同上面的arcTween方法
    var i = d3.interpolate(angleToDegree(oldAngle), angleToDegree(newAngle));  //取插值
    return function(t) {
      return 'rotate('+ i(t) +')'
    };
  })

至此,我们就成功制作了一个动态刷新的简介美观的SVG仪表盘。

结束

每次使用D3.js都会忍不住觉得它真是太强大、太有意思了~它就像是一个百宝箱,让我们最大限度地满足需求。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JavaScript更改原始对象valueOf的方法
Mar 19 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 #Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 #Javascript
vue cli升级webapck4总结
Apr 04 #Javascript
JavaScript实现短暂提示框功能
Apr 04 #Javascript
Vue filter介绍及详细使用
Apr 04 #Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 #Javascript
You might like
一篇入门的php Class 文章
2007/04/04 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php短信接口代码
2016/05/13 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php接口隔离原则实例分析
2019/11/11 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Python中的zipfile模块使用详解
2015/06/25 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
基于Python实现用户管理系统
2019/02/26 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python线程threading模块用法详解
2020/02/26 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
法律进机关实施方案
2014/03/12 职场文书
大学生求职信范文
2014/05/24 职场文书
七夕情人节促销方案
2014/06/07 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
高三英语教学计划
2015/01/23 职场文书
店铺转让协议书
2015/01/29 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers