Javascript 如何正确地将颜色渐变应用于圆弧？

我正在构建一个类似以下内容的视觉效果：

到目前为止，我已成功创建了以下内容：

其思想是将一个值映射到一个角度，以便我知道箭头指向何处，然后我将为箭头上色，使其与它指向的弧上的点的颜色相同

我基本上有两个问题：

首先，我可以做些什么，以使颜色更好地排列。我使用了一个线性渐变，如下所示：

 let defs = this.gaugeEl
                .append("defs")
                .classed("definitions",true);
        let gradient = defs
            .append("linearGradient")
            .classed("linearGradient",true);

        gradient
            .attr({
                id: 'gradient',
                x1: '0%',
                y1: '0%',
                x2: '100%',
                y2: '100%',
                spreadMethod: "pad"
            });

        gradient
            .append("stop")
            .classed('start',true)
            .attr({
                offset: '0%',
                'stop-color': 'lawngreen',
                'stop-opacity': 1
            });

        gradient.append("stop")
            .classed('end',true)
            .attr({
                offset: '100%',
                'stop-color': 'red',
                'stop-opacity': 1
            });

效果不是我所希望的，能做些什么

---

关于渐变如何工作的下一个问题，我需要能够将一个角度与一种颜色相关联，这样我才能正确地为箭头和记号着色，而在我当前的设置中，我不知道如何做到这一点。有可能吗？

我不知道这对你有多大用处。但我遵循了下面的实现

将弧拆分为小弧 使用比例线关联颜色和角度，并将圆弧分为四段 忽略糟糕的数学和代码

图表{ 宽度：960px； 高度：350px； } var vis=d3.selectchart.appendg var-pi=Math.pi； var line=d3.line .xfunction d{return d.x；} .yfunction d{返回d.y；}； 变量行=[] var断点=100； var angleArr=[]； var-arcArr=[]； //角度arr[0]=-pi/2； var colorScale=d3.scaleLinear .domain[-pi/2，-pi/3,30*pi/180，pi/2] .范围[‘浅绿色’、‘浅绿色’、‘黄色’、‘红色’]； var angleScale=d3.scaleLinear .范围[-pi/2，pi/2] .domain[0，断点-1]； var prevAngle=-pi/2； forvar i=0；i<断点；i++{ angleArr[i]=angleScalei； var singleArrow=[{x:150*Math.sinangleArr[i]，y:-150*Math.cosangleArr[i]}，{y:-170*Math.cosangleArr[i]，x:170*Math.sinangleArr[i]}； //var subArc={start:prev，end:0}； var subArc={}； 行。单箭头； Subrac[开始]=前角； subrac[end]=anglerar[i]； prevAngle=angleArr[i]； arcArr.pushsubac； } var arc=d3.arc .内半径160 .户外170 .startAngle pi/2//从degs转换为弧度 .endAnglepi/2//仅弧度 vis.attrwidth，400.attrheight，400//增加了高度和宽度，使圆弧可见 .附录 .attransform，translate200200； vis.selectAllline .数据线 进来 .appendpath.attrclass、arrow.attrd、line.attrstroke、functiond、i{ 返回colorScaleangleArr[i]}.attrtransform，translate200200； vis.selectAllarcs .dataarcArr 进来 .appendpath.attrclass、arc.attrd、functiond、i{ 返回d3.5弧 .内半径160 .户外170 .斯塔德 .endAngled.start}.attrfill，函数d，i{ 返回colorScaleangleArr[i]}.attrtransform，translate200200；

---

现在有一种更简单的方法可以使用css属性（称为圆锥梯度）来实现这一点

它根据给定中心点的角度设置颜色。也许你可以通过点击事件获得点的角度，计算出从中心的角度，然后以此方式设置颜色

---

这里有一些关于圆锥梯度的更多信息，包括如何计算：

试着一次只问一个问题。关于路径梯度-这很漂亮！最后我做了类似的事情，只使用了paths元素，它的优点是可以很容易地推广到许多形式。你的结果比我的好，我相信我会采用这种方法。谢谢