d3js Aster Plot label text wrapping

Question

We are currently designing Aster Plot using D3Js. There is a requirement to wrap label text with orientation. The orientation is achieved but issues with wrap. Now it looks like Current Aster Plot and the output should look like as shown in Output Aster Plot

Code Snippet

 var outerGroup = svg.selectAll(".solidArc")
      .data(pie(data))
      .enter()
      .append("g");

 var text = outerGroup.append("text")
            .attr("transform", function (d) {
                var rotation = computeTextRotation(d);
                if (rotation.correction >= 180) {

                    var midAngle = d.endAngle < Math.PI ? d.startAngle / 2 + d.endAngle / 2 : d.startAngle / 2 + d.endAngle / 2 + Math.PI;
                    return "translate(" + labelArc.centroid(d)[0] + "," + labelArc.centroid(d)[1] + ") rotate(-90) rotate(" + (midAngle * 180 / Math.PI) + ")";
                }
                else {
                    return "rotate(" + rotation.global + ")" + "translate(" + (radius + innerRadius) / 2 + ",0)" + "rotate(" + -rotation.correction + ")";
                }
            })
            .attr("text-anchor", "right")
            .text(function (d) {
                return d.data.label;
            });

 function computeTextRotation(d) {
        var rotation = (d.startAngle + d.endAngle) / 2 * 180 / Math.PI - 90;
        return {
            global: rotation,
            correction: rotation > 90 ? 180 : 0
        };
    }