D3.js實現動態表盤效果

<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) +')')

valueLabel.text(newValue)

//更新圓弧，并且設置漸變動效
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) +')'
 };
 })