曲線上のある時点で、針を追加する方法D3

トニー：

私はD3でゲージを構築しています。それは基本的に半月だし、値に基づいて割合を埋めます。その下の例では、80％を満たします。

私は何をしたいの進行が終了し、ショーを開始する（この場合は80％）の数値という針を追加することです。私はそれだけで以下の例のようになりたいです：

どのように私は私のラインの始点と終点を計算することについては行くのですか？私のコードは以下の通りです：

    function drawBandwidthChart(target) {
    
            const Gauge =function () {
                const config = {
                    size: 200,
                    arcWidth: 12,
                    indicatorWidth: 26,
                    indicatorHeight: 4,
                    minValue: 0,
                    maxValue: 100,
                    minAngle: -90,
                    maxAngle: 90,
                };
    
                const gaugeObject = {};
                const outerRadius = config.size / 2;
                const innerRadius = config.size / 2 - config.arcWidth;
                let foreground;
                let arc;
                let svg;
                let current;
    
                const deg2rad = (deg) => {
                    return deg * Math.PI / 180;
                };
    
                function render (){
                    arc = d3.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius)
                        .startAngle(deg2rad(-90));
    
                    // create the SVG
                    svg = d3.select(target).append('svg')
                        .attr('width', config.size + config.indicatorWidth)
                        .attr('height', config.size / 2)
                        .append('g')
                        .attr('transform', `translate(${config.size / 2},${config.size / 2})`);
    
                    // append the gauge curve background
                    const background = svg.append('path')
                        .datum({ endAngle: deg2rad(90) })
                        .style('fill', '#737078')
                        .attr('d', arc);
    
                    // append the line on the right side of the chart
                    svg.append('line')
                        .style('stroke', '#737078')
                        .style('stroke-width', config.indicatorHeight)
                        .attr('x1', config.size / 2)
                        .attr('y1', 0)
                        .attr('x2', (config.size / 2) + config.indicatorWidth)
                        .attr('y2', 0);
    
                    // Display Current value
                    // append the gauge curve fill
                    foreground = svg.append('path')
                        .datum({ endAngle: deg2rad(-90) })
                        .style('fill', '#784bf5')
                        .attr('d', arc);
    
                    current = svg.append('text')
                        .attr('transform', 'translate(0,' + 0 + ')')
                        .attr('text-anchor', 'middle')
                        .style('fill', 'white')
                        .style('font-size', `12px`)
                        .style('font-family', 'IBM Plex Sans')
                        .text(current);
    
                };
    
                function update (value) {
                    const numPi = deg2rad(Math.floor(value * 180 / config.maxValue - 90));
    
                    // Display Current value
                    current.transition()
                        .text(value + '%');
    
                    // Arc Transition
                    foreground.transition()
                        .duration(750)
                        .styleTween('fill', () => d3.interpolate('#784bf5', '#784bf5'))
                        .call(arcTween, numPi);
                };
    
                // Update animation
                function arcTween (transition, newAngle) {
                    transition.attrTween('d', d => {
                        const interpolate = d3.interpolate(d.endAngle, newAngle);
                        return t => {
                            d.endAngle = interpolate(t);
                            return arc(d);
                        };
                    });
                };
    
                render();
                gaugeObject.update = update;
                gaugeObject.configuration = config;
                return gaugeObject;
            };
    
            const gauge = Gauge();
            gauge.update(0);
            gauge.update(80);
        }
    
        const container = document.getElementById('bandwidthChartContainer');
    
        drawBandwidthChart(container);

        body {
            text-align: center;
            padding-top: 10em;
            background-color: black;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <body>
    <div id="bandwidthChartContainer"></div>
    </body>

ジョセフ：

代わりにラインを回転させながら作業しようとする、既存のアークがないことと同じトランジション/トゥイーンを使用する別の円弧を追加することができます。ここでの違いは、新しいアーク（メインアークの外半径で内側半径開始ちょうどこと）、しかし示すアークの量は、それがどのように見えることが薄い十分であるメインアークと同じ内側/外側の半径の値を有することですラインは、メインアークから出てきます。

私はcodepen作られ、ここで例として。

私は、SVG幅を調整し、メインアークがSVG幅の左側にあるすべての方法だったので少しを変換しなければならなかったとインジケータが表示されません。私も追加// ADDEDし、// CHANGED私が追加されたコードに/いくつかのことを変更しました。