This time I will bring you a case of implementing a dynamic dashboard with D3.js. What are the precautions for implementing a dynamic dashboard with D3.js? The following is a practical case, let’s take a look.
This article introduces an example of D3.js implementing a simple and practical dynamic dashboard, and shares it with everyone. The details are as follows: Dynamic renderings: Dashboard RenderingIf you look closely at the dynamic rendering above, you can find:Initialize the dashboard
1. First define an svg element:<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, //圆弧的起始角度和终止角度
var arc = d3.arc() .innerRadius(22) .outerRadius(30) .startAngle(arcMin)
var svg = d3.select("#myGauge") var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//添加仪表盘的标题 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("%");
.gauge-title{ font-size: 10px; fill: #A1A6AD; }
//添加背景圆弧 var background = g.append("path") .datum({endAngle:arcMax}) //传递endAngle参数到arc方法 .style("fill", "#444851") .attr("d", arc);
//计算圆弧的结束角度 var currentAngle = percentage*(arcMax-arcMin) + arcMin //添加另一层圆弧,用于表示百分比 var foreground = g.append("path") .datum({endAngle:currentAngle}) .style("fill", "#444851") .attr("d", arc);
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) +')')
Update Dashboard
Need to update: arc representing the new percentage; the value below the arc. Modifying the value below the arc is very simple:valueLabel.text(newValue)
https://github.com/d3/d3-transition/blob/master/ README.md#selection_transitiontransition.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
//更新圆弧,并且设置渐变动效 foreground.transition() .duration(750) .ease(d3.easeElastic) //设置来回弹动的效果 .attrTween("d", arcTween(angle));
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”属性值 }; }; }
//更新圆弧末端的指针标记,并且设置渐变动效 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) +')' }; })
End
Every time I use D3.js, I can’t help but feel that it is so powerful and interesting~ It is like a treasure chest, allowing us to maximize meet needs.I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of modularization in AngularJS applications
How to implement DOM insertion nodes in JS
The above is the detailed content of D3.js implements dynamic dashboard case. For more information, please follow other related articles on the PHP Chinese website!