d3.js - 弧内的文本未对齐/重叠

Question

我正在绘制一个饼图，在每个弧形中我将文本写在中心。但是，当弧太小时，文本会错位。如果弧太细，我如何限制写入文本。有没有办法识别弧而不是写文本。

我的代码：

var arc = d3.svg.arc()
        .outerRadius(radius - 45)
        .innerRadius(radius -200);


        var pie = d3.layout.pie()
        .sort(null)
        .value(function(d) {return d.Components;});
        var g = svg.selectAll(".arc")

        .data(pie(newdata))
        .enter().append("g")
        .attr("class", "arc")
        .attr("id", function(d,i) {return "group" + i})
        g.append("path")
        .attr("d", arc)
        .style("fill","#FFFFFF")
        .transition()
        .ease("bounce")
        .duration(1000)
        .delay(function(d, i) {return i * 500;})
        .style("fill", function(d,i)
        {
            var c = d.data.Source;
            if (c=="GREEN")
                {
                    return "#78a22f";
                }
            else if (c=="RED")
                {
                    return "#a00000";
                }
            else if (c=="AMBER")
                {
                    return "#Ffb400";
                }

            else
                {
                    return "#DADCF6";

                }

        });
        g.append("text")
        .attr("transform", function(d)
        {
            //comment

            var c = arc.centroid(d);
            var param,param1
            param = c[1]- 20;
            param1= c[0]- 38;

            return "translate(" + param1 + "," + param + ")";

        })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .attr("style","font-family: Arial;border: solid 1px" )

        .transition()
            .ease("bounce")
            .duration(1000)
            .delay(function(d, i) {return i * 500;})
        .text(function(d) {

                    return ((d.data.Status));

               }

        });

        g.append("text")
        .attr("transform", function(d)
        {
            var c = arc.centroid(d);
            var param = c[1];
            var param1=c[0];
            return "translate(" + param1 + "," + param + ")";
        })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .transition()
        .ease("bounce")
        .duration(1000)
        .delay(function(d, i) {return i * 500;})
    .text(function(d) {
            if (eval(d.data.Components) >0)
               {
                   return (Number(d.data.Components).toFixed(0)) + "   (" + (Number(d.data.Percentage).toFixed(1) + "%)");
               }

        });

数据就像：

"Source","Components","Percentage","Business Unit","Status","BUId"
"RED","20","4.77","Financial & Risk - ALL","Analyzed","67001003"
"AMBER","2","0.48","Financial & Risk - ALL","Identified","67001003"
"GREEN","21","5.01","Financial & Risk - ALL","Approved","67001003"
"PALEBLUE","83","19.81","Financial & Risk - ALL","Unmapped","67001003"
"GREY","293","69.93","Financial & Risk - ALL","Not Applicable","67001003"