Javascript 在饼图中使用d3在两个位置显示饼图上的文本

我试图在扇形图的两个位置显示每个圆弧上的文本。 第一个文本位于弧的中心。（我能得到它）。 第二个文本应位于圆直径线上第一个文本的正下方

<script src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript"
    src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

<div class="barChart"></div>
<div class="circles"></div>
<style>
</style>
<script>
    $(document).ready(
            function() {

                circles();
                $(".circles").show();
                function circles() {
                    var w = 300;
                    var h = 300;
                    var r = h / 2;

                    var color = d3.scale
                            .ordinal()
                            .range(["#FFDA33","#AB33FF","#33FF53","#FF3333" ]); //GPVF

                    var ydata= [{"good":5,"pto":10,"v":25,"f":8}];                      

                    var data = [
                            {
                                "label" : ydata[0].good+" oz",
                                "value" : 25
                            },
                            {
                                "label" : ydata[0].pto+" oz",
                                "value" : 25
                            },
                            {
                                "label" : ydata[0].v+" C",
                                "value" : 25
                            },
                            {
                                "label" : ydata[0].f+" C",
                                "value" : 25
                            } ];

                    var vis = d3
                            .select("body")
                            .append(
                                    "svg:svg")
                            .data([ data ])
                            .attr("width",
                                    w)
                            .attr("height",
                                    h)
                            .append("svg:g")
                            .attr(
                                    "transform",
                                    "translate("
                                            + r
                                            + ","
                                            + r
                                            + ")");
                    var pie = d3.layout
                            .pie()
                            .value(
                                    function(
                                                d) {
                                        return d.value;
                                    });

                    var arc = d3.svg.arc()
                            .outerRadius(r);

                    var arcs = vis
                            .selectAll(
                                    "g.slice")
                            .data(pie)
                            .enter()
                            .append("svg:g")
                            .attr("class",
                                    "slice");

                    arcs
                            .append(
                                    "svg:path")
                            .attr(
                                    "fill",
                                    function(
                                                d,
                                                i) {
                                        return color(i);
                                        // return color(d.data.value)
                                    })
                            .attr(
                                    "d",
                                    function(
                                                d) {
                                        return arc(d);
                                    })
                            .attr('stroke',
                                    '#fff')
                            // <-- THIS
                            .attr(
                                    'stroke-width',
                                    '3');

                    // add the text
                    arcs
                            .append(
                                    "svg:text")
                            .attr(
                                    "transform",
                                    function(d,i) {
                                        d.innerRadius = 0;
                                        d.outerRadius = 0;
                                        var c  =arc.centroid(d);
                                        return "translate("+c[i]+ ")";
                                    })
                            .attr("text-anchor","middle")
                            .style("font-size","32px")
                            .style("text-decoration","bold")
                            .text(
                                    function(
                                                d,
                                                i) {
                                        return data[i].label;
                                    }); 
                    arcs
                    .append(
                            "svg:text")
                    .attr(
                            "transform",
                            function(d) {
                                d.innerRadius = 0;
                                d.outerRadius = 0;
                                var c = arc.centroid(d);
                                return "translate("+ arc.centroid(d) + ")"; })
                    .attr("text-anchor","bottom")
                    .style("font-size","32px")
                    .style("text-decoration","bold")
                    .text(
                            function(
                                        d,
                                        i) {
                                return data[i].label;
                            }); 
                }
            });
</script>

$（文件）。准备好了吗(
函数（）{
圆圈（）；
$（“.circles”）.show（）；
函数圆（）{
var w=300；
var h=300；
var r=h/2；
var color=d3.0刻度
.序数（）
.range（[“#FFDA33”、“#AB33FF”、“#33FF53”、“#FF3333”]）//GPVF
var ydata=[{“好”：5，“pto”：10，“v”：25，“f”：8}]；
风险值数据=[
{
“标签”：ydata[0]。良好+“盎司”，
“价值”：25
},
{
“标签”：ydata[0]。pto+“盎司”，
“价值”：25
},
{
“标签”：ydata[0].v+“C”，
“价值”：25
},
{
“标签”：ydata[0].f+“C”，
“价值”：25
} ];
var vis=d3
.选择（“正文”）
.附加(
“svg:svg”）
.数据（[数据]）
.attr（“宽度”，
w）
.attr（“高度”，
h）
.append（“svg:g”）
艾特先生(
“转化”，
“翻译（”
+r
+ ","
+r
+ ")");
变量pie=d3.0布局
.pie（）
.价值(
作用(
（d）{
返回d值；
});
var arc=d3.svg.arc（）
.外层（r）；
var弧=vis
.全选(
“g.切片”）
.数据（pie）
.输入（）
.append（“svg:g”）
.attr（“类”，
“切片”）；
弧
.附加(
“svg:路径”）
艾特先生(
“填充”，
作用(
D
(一){
返回颜色（i）；
//返回颜色（d.data.value）
})
艾特先生(
“d”，
作用(
（d）{
返回弧（d）；
})
.attr（'stroke'，
"fff")
//而不是：

return "translate("+c[i]+ ")";

应该是：

return "translate(" + c[0] + "," + c[1] + ")";

为了正确定位第一个文本，我还设置了
.attr（“主基线”，“中心”）

关于第二个文本，
文本锚定
没有“底部”。由于我不完全理解直径线的确切含义，我硬编码了位置，因此我们可以稍后按照您想要的方式对其进行调整

这里是plunker:
扩展Gerardo的答案，您还可以使用
dy
属性设置文本的位置。基本上是这样的

     arcs.append("svg:text")
     .attr("transform", function(d) {
      var c = arc.centroid(d);
      return "translate(" + c[0] + "," + c[1] + ")";
     })
     .attr('dy', '2em')
     .attr("text-anchor", "middle")
     .style("font-size", "12px")
     .style("text-decoration", "bold")
     .text(
      function(d, i) {
       return data[i].label;
      });

Plunker:
漂亮！我想简单地使用“dy”，但我不确定OP想要什么：在我看来，他/她想要所有的第二个文本都靠近“直径线”。