Display text on a pie in Pie Charts using d3 at two places

Question

I am trying to display text on an each arc in a pie chart at two places. The first text is in the center of the arc. (I am able to get it ). The second text should be right underneath the first text on the diameter line of the circle.

<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>

Can anyone please help me add the second text on the diameter line

Running code here http://plnkr.co/edit/hBDBkIEWqU6NWmYBgELa Thanks

Answer 1

Instead of:

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

It should be:

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

For correctly positioning the first text. Also, I set .attr("dominant-baseline", "central") .

Regarding the second text, there is no "bottom" to text-anchor . As I didn't understand exactly what you mean by diameter line, I hardcoded the positions, so we can tweak it later the way you want.

Here is the plunker: http://plnkr.co/edit/oyRhdsD7xzQhWkbJVRc3?p=preview

Answer 2

Extending the answer of Gerardo you can also use the dy attribute to set the position of your text.Basically be something like this

     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: http://plnkr.co/edit/al7hNU8dhex0ePnfYFFN?p=preview