javascript - 在两个地方使用 d3 在饼图中的饼图上显示文本

Question

我正在尝试在两个位置的饼图中的每个圆弧上显示文本。第一个文本位于圆弧的中心。 (我能够得到它)。第二个文本应该位于圆直径线上第一个文本的正下方。

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

谁能帮我在直径线上添加第二个文字

此处运行代码 http://plnkr.co/edit/hBDBkIEWqU6NWmYBgELa谢谢

Answer 1

扩展 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;
      });

笨蛋:http://plnkr.co/edit/al7hNU8dhex0ePnfYFFN?p=preview