Javascript D3.js仪表图指示器和标签定位

我不熟悉图表，我正在使用仪表图表样式。为此，我在互联网上搜索了一下，找到了下面的简单代码，并从我这边做了一些调整，它运行良好，如下面的屏幕截图所示

下面分享了这方面的代码

D3.js仪表图基本代码：

/*---------------------
//D3.js仪表图//
---------------------*/
//需要提取的数据
var name=“服务器响应”；
var值=75；//我想要展示的价值
var gaugeMaxValue=100；
//计算数据
var percentValue=值/计量器最大值；
客户机；
（功能（）{
var barWidth、chart、chartInset、degToRad、RepaitGauge、height、margin、numSections、padRad、percToDeg、percToRad、percent、radius、sectionIndx、svg、totalPercent、width、recalcPointerPos；
百分比=百分比值；
numSections=1；
sectionPerc=1/numSections/2；
帕德拉德=0.025；
图表插图=10；
//仪表的方向：
总百分比=0.75；
el=d3。选择（“.图表量规”）；
保证金={
前20名，
右:20,，
底数：20，
左：20
};
宽度=el[0][0]。偏移网络宽度-margin.left-margin.right；
高度=宽度；
半径=数学最小值（宽度、高度）/2；
棒材宽度=40*300宽；
//实用方法
percToDeg=功能（perc）{
返回perc*360；
};
percToRad=功能（perc）{
返回degToRad（percToDeg（perc））；
};
degToRad=功能（度）{
返回度*数学PI/180；
};
//创建SVG元素
svg=el.append（'svg'）.attr（'width'，width+margin.left+margin.right）.attr（'height'，height/1.5+margin.top+margin.bottom）；//height/1.5以删除额外的底部空间
//为面板添加图层
chart=svg.append（'g'）.attr（'transform'，“translate”（+（（width+margin.left）/2）+>，“+（（height+margin.top）/2）+”）；
chart.append（'path'）.attr（'class'，'arc chart first'）；
chart.append（'path'）.attr（'class'，'arc chart second'）；
chart.append（'path'）.attr（'class'，'arc chart third'）；
arc3=d3.svg.arc（）.outerRadius（半径-图表插图）。innerRadius（半径-图表插图-条形宽度）
arc2=d3.svg.arc（）.outerRadius（半径-图表插图）。innerRadius（半径-图表插图-条形宽度）
arc1=d3.svg.arc（）.outerRadius（半径-图表插图）。innerRadius（半径-图表插图-条形宽度）
重新绘制仪表=功能（）{
perc=0.5；
var next_start=总百分比；
arcStartRad=percToRad（下一次启动）；
arcEndRad=arcEndRad+percToRad（perc/3）；
下一次启动+=perc/3；
arc1.星形缠结（arcStartRad）.端角（arcEndRad）；
arcStartRad=percToRad（下一次启动）；
arcEndRad=arcEndRad+percToRad（perc/3）；
下一次启动+=perc/3；
arc2.星形缠结（arcStartRad+padRad）.端角（arcEndRad）；
arcStartRad=percToRad（下一次启动）；
arcEndRad=arcEndRad+percToRad（perc/3）；
arc3.startAngle（arcStartRad+padRad）、endAngle（arcEndRad）；
图表。选择（“.chart first”）.attr（'d'，arc1）；
图表。选择（“.chart second”）.attr（'d'，arc2）；
图表。选择（“.chart third”）.attr（'d'，arc3）；
}	
变量指针=（函数（）{
//返回移动针的'd'值的Helper函数
var recalcPointerPos=函数（perc）{
变量centerX、centerY、leftX、leftY、rightX、rightY、thetaRad、topX、topY；
thetaRad=percToRad（perc/2）；
centerX=0；
centerY=0；
topX=centerX-this.len*Math.cos（thetaRad）；
topY=centerY-this.len*Math.sin（thetaRad）；
leftX=centerX-this.radius*Math.cos（thetard-Math.PI/2）；
leftY=centerY-this.radius*Math.sin（thetara-Math.PI/2）；
rightX=centerX-this.radius*Math.cos（thetaRad+Math.PI/2）；
rightY=centerY-this.radius*Math.sin（thetaRad+Math.PI/2）；
返回“M”+leftX+“”+leftY+“L”+topX+“”+topY+“L”+rightX+“”+rightY；
};
功能针（el）{
this.el=el；
这1.len=宽度/2.5；
this.radius=this.len/8；
}
Needle.prototype.render=函数（）{
this.el.append（'circle'）.attr（'class'，'needle center'）.attr（'cx'，0）.attr（'cy'，0）.attr（'r'，this.radius）；
返回这个.el.append（'path'）.attr（'class'，'needle'）.attr（'id'，'client needle'）.attr（'d'，recalcPointerPos.call（this，0））；
};
Pinele.prototype.moveTo=功能（perc）{
var self，
oldValue=this.perc | | 0；
this.perc=perc；
self=这个；
//重置指针位置
this.el.transition（）.delay（100）、ease（'quad'）、duration（200）、select（'needle'）、tween（'reset-progress'，函数（）{
返回函数（百分比）{
风险值进度=（1%的百分比）*旧值；
重新油漆（进度）；
返回d3.select（this.attr（'d'，recalpointerpos.call（self，progress））；
};
});
this.el.transition（）.delay（300）、ease（'bounce'）、duration（1500）、select（'needle'）、tween（'progress'，function（）{
返回函数（百分比）{
风险值进度=百分比*perc；
重新油漆（进度）；
返回d3.select（this.attr（'d'，recalpointerpos.call（self，progress））；
};
});
};
回针；
})();
变量数据集=[{
公制：名称，
价值：价值
}]
var text=svg.selectAll（“文本”）
.数据（数据集）
.enter（）；
文本。附加（“文本”）
.text（函数（）{
返回数据集[0]。度量；
})
.attr（“id”，“名称”）
.attr（'transform'，“translate”（+（（宽度+边距.left）/6）+”，“+（（高度+边距.top）/1.5）+”）
.attr（“字体大小”，25）
.style（“填充”、“000000”）；
var trX=180-210*数学成本（percToRad（百分比/2））；
var trY=195-210*Math.sin（percToRad（百分比/2））；
//（180195）是仪表中心的坐标。
displayValue=函数（）{
文本。附加（“文本”）
.text（函数（）{
返回数据集[0]。值；
})
.attr（'id'，'Value'）
.attr（'transform'，'translate（“+trX+”，“+trY+”））
.attr（“字体大小”，18）
.style（“填充”、“000000”）；
}
文本。附加（“文本”）
.text（函数（）{
返回0；
})
.attr（'id'，'scale0'）
.attr（'transform'，'t