求助：使用D3.js实现指定SVG渐变弧形效果

我希望实现如下SVG渐变弧形效果：

• 目标效果：
• 当前实现效果：

目前我的实现效果和目标有差距，以下是我编写的D3.js代码，恳请提供技术帮助：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Speed Arc</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #speed-arc {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .background {
            fill: lightgray;
        }

        .path {
            fill: url(#arcBackground);
        }
    </style>
</head>

<body>
    <div id="speed-arc"></div>
    <script>
        // Set the dimensions and margins of the graph
        var width = 500,
            height = 500,
            margin = 0;

        // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
        var radius = Math.min(width, height) / 2 - margin;

        // Append the svg object to the div called 'speed-arc'
        var svg = d3.select("#speed-arc")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

        // Create background arc
        var backgroundArc = d3.arc()
            .innerRadius(160)
            .outerRadius(170)
            .startAngle(-0.75 * Math.PI)
            .endAngle(0.75 * Math.PI);

        // Create foreground arc
        var arc = d3.arc()
            .innerRadius(160)
            .outerRadius(170)
            .cornerRadius(5)
            .startAngle(-0.75 * Math.PI);

        // Append background arc
        svg.append("path")
            .attr("class", "background")
            .attr("d", backgroundArc);

        // Append foreground arc
        var path = svg.append("path")
            .datum({
                endAngle: -0.75 * Math.PI
            })
            .attr("class", "path")
            .attr("d", arc)
            .attr("fill", "url(#arcBackground)");

        // Create the gradient for the arc
        var gradient = svg.append("defs")
            .append("linearGradient")
            .attr("id", "arcBackground")
            .attr("x1", "0%")
            .attr("x2", "100%")
            .attr("y1", "0%")
            .attr("y2", "0%");

        gradient.append("stop")
            .attr("offset", "0%")
            .attr("stop-color", "#F95247"); // Red

        gradient.append("stop")
            .attr("offset", "20%")
            .attr("stop-color", "#FD7A4F"); // Orange-red

        gradient.append("stop")
            .attr("offset", "50%")
            .attr("stop-color", "#F8E23D"); // Yellow

        gradient.append("stop")
            .attr("offset", "75%")
            .attr("stop-color", "#B6E359"); // Light green

        gradient.append("stop")
            .attr("offset", "100%")
            .attr("stop-color", "#15DA88"); // Green

        // Create the arc scale
        var arcScale = d3.scalePow()
            .exponent(0.3)
            .domain([0, 15])
            .range([-0.75 * Math.PI, 0.75 * Math.PI])
            .clamp(true);

        // Function to update the arc
        function updateArc(speed) {
            var arcTween = function(transition, speed) {
                transition.attrTween("d", function(d) {
                    var interpolate = d3.interpolate(d.endAngle, arcScale(speed));
                    return function(t) {
                        d.endAngle = interpolate(t);
                        return arc(d);
                    };
                });
            };

            path.transition()
                .duration(750)
                .call(arcTween, speed);
        }

        // Example usage: update the arc with a speed value
        updateArc(15);

        // You can call updateArc function with different values to animate the arc
    </script>
</body>

</html>

内容的提问来源于stack exchange，提问作者Stu