向圆弧添加文本

Question

我做了一个弧线，显示了某些事情的进展。现在，我想向圆弧添加文本。就像在起点我想提到零，在终点我想提到100％。 U可以参考codepen作为示例。

function myfunction(x)
{
    console.log(parseFloat(document.getElementById("myText").value))
    var percent = (parseFloat(document.getElementById("myText").value));
    d3.select("svg").remove();
    var ratio=parseFloat(percent/100);
    var pie=d3.layout.pie()
            .value(function(d){return d})
            .sort(null);
    var w=300,h=300;
    var outerRadius=(w/2)-10;
    var innerRadius=85;
    var color = ['#f7f4f4','#8b8de5','#888888'];
    var colorOld='#F00';
    var colorNew='#0F0';
    var arc=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(Math.PI);
    var arcLine=d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0);
    var svg=d3.select("#chart")
            .append("svg")
            .attr({
                width:w,
                height:h,
                class:'shadow'
            }).append('g')
            .attr({
                transform:'translate('+w/2+','+h/2+')'
            });
    var path=svg.append('path')
            .attr({
                d:arc,
                transform:'rotate(-90)'
            }).attr({
                'stroke-width':"1",
                stroke:"#666666"
            })
            .style({
                fill:color[0]
            })
}