jquery - d3js Aster Plot 标签文本换行

Question

我们目前正在使用 D3Js 设计 Aster Plot。需要用方向包装标签文本。方向已实现，但换行出现问题。现在它看起来像Current Aster Plot并且输出应该看起来像Output Aster Plot中所示

代码片段

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