Javascript 如何在d3.js中修改圆弧的着色？

在过去的几天里，我一直在尝试用一根指针来测量戒指背景颜色的变化

我想更新我在d3.js中创建的仪表中圆弧的颜色

我用这个弧创建了这个仪表：

var randomConfigObject={
尺寸：200，
clipWidth:200，
克利菲特：110，
环插图：20，
环宽：20，
指针宽度：10，
指针长度：5，
PointerHeadLength百分比：0.9，
最小值：0，
最大值：10，
米南格尔：-90-45，
最大角度：90+45，
过渡期：750，
少校：5，
labelFormat:d3.format（'，g'），
标签组：10，
arcColorFn:d3.interpolateHsl（d3.rgb（'e8e2ca'），d3.rgb（'e6c0a'））
};
var planeStringImage="M 439.48098,95.969555 L 393.34268142.46481 L 305.91233133.41187 L 324.72376114.58551 L 308.61525,98.464215 L 276.15845130.94677 L 185.25346123.08136 L 201.15145107.27643 L 186.46085,92.574165 L 158.32120.73735 L 45.386032112.12042 L 15.0000171717131.66667 L 221.20641192.48691 L 298.13337.1918.828 L 82828.82841.549634393.05411 L 21.037984413.58203 L 109.25334470.93369 L 166.3851558.95725 L 186.8968538.42933 L 171.35503427.06371 L 234.28504387.94939 L 342.81586281.51396 L 387.3053558.6303 L 448.07703565.00001 L 467.60778534.58989 L 458.99769421.56633 L 487.16033393.38473.473.39639 L 639481.25315271.15184 L 465.14464255.03055 L 446.33321273.8569 L 436.04766185.1164 L 482.35108138.7864 C 501.1942119.92833 560.62425,61.834815 564.99998,14.999985 C 515.28999,23.707295 476.1521,61.495405 439.48098,95.96955 z”；
var planetstyleelement=“不透明度：1；颜色：#000000；填写：#000000；填充不透明度：1；填充规则：非零；中风：无；标记：无；能见度：可见；显示：内联；溢出：可见”；
var tickDataLabel=['S'，'210'，'240'，'W'，'300'，'330'，'N'，'030'，'060'，'E'，'120'，'150'，'S']；
变量仪表=功能（容器、配置、配置）{
var，它={}；
var范围=未定义；
var r=未定义；
var pointerHeadLength=未定义；
var值=0；
var minAngle=0；
var maxAngle=0；
var计数器=0；
var svg=未定义；
var arc=未定义；
//将域值映射到0..1的百分比的线性比例
var scale=d3.scale.linear（）
.范围（[0,1]）
.domain（[config.minValue，config.maxValue]）；
var ticks=未定义；
var数据=未定义；
var指针=未定义；
var minpointer=未定义；
var maxpointer=未定义；
var平面=未定义；
var donut=d3.layout.pie（）；
功能deg2rad（度）{
返回度*数学PI/180；
}
函数newAngle（d）{
var比率=标度（d）；
var newAngle=config.minAngle+（比率*范围）；
返回新角度；
}
功能配置（配置）{
var prop=未定义；
用于（配置中的道具）{
配置[prop]=配置[prop]；
}
log（'配置是什么？'）；
log（JSON.stringify（config））；
range=config.maxAngle-config.minAngle；
r=config.size/2；
pointerHeadLength=Math.round（r*config.pointerHeadLength百分比）；
//ticks=scale.ticks（config.majorTicks）；
ticks=scale.ticks（config.majorTicks）；
tickData=d3.range（config.majorTicks.map）（函数（）{return 1/config.majorTicks；}）；
log（'什么是勾号数据？'）；
console.log（数据）；
//数据量表
arc=d3.svg.arc（）
.innerRadius（r-config.ringWidth-config.ringInset）
.outerRadius（r-config.ringInset）
.startAngle（功能（d，i）{
var比率=d*i；
返回deg2rad（config.minAngle+（比率*范围））；
})
.端角（功能（d，i）{
风险值比率=d*（i+1）；
返回deg2rad（config.minAngle+（比率*范围））；
});
}
函数createNewArc（）{
返回arc=d3.svg.arc（）
.内半径（50）
.外层（70）
.startAngle（deg2rad（20））
.端角（deg2rad（45））
}
配置=配置；
函数中心翻译（）{
返回'translate（'+r+'，'+r+'）；
}
函数isRendered（）{
返回（svg！==未定义）；
}
that.isRendered=isRendered；
函数渲染（newValue）{
svg=d3.选择（容器）
.append（'svg:svg'）
.attr（'id'，'gauge'）
.attr（'width'，config.clipWidth）
.attr（'height'，config.clipHeight）；
var centerTx=centertransformation（）；
var arcs=svg.append（'g'）
.attr（'class'，'arc'）
.attr（'transform'，centerTx）；
arcs.selectAll（'路径'）
.数据（数据）
.enter（）.append（'path'）
.attr（'fill'，函数（d，i）{
返回配置arcColorFn（d*i）；
})
.attr（'d'，弧）；
var lg=svg.append（'g'）
.attr（'类'，'标签'）
.attr（'transform'，centerTx）；
lg.selectAll（'text'）
.数据（滴答声）
.enter（）.append（'text'）
.attr（'transform'，函数（d）{
var比率=标度（d）；
var newAngle=config.minAngle+（比率*范围）；
返回“rotate（'+newAngle++'）translate（0，'+（config.labelInset-r）+'）；
})
.text（config.labelFormat）；
var planeData=[[config.pointerWidth/2，0]，
[4，-pointerHeadLength]，
[-（config.pointerWidth*4），0]，
[0，config.pointerTailLength]，
[config.pointerWidth/2，0]]；
var svgPlaneData=[[config.pointerWidth/2，0]，