d3js Aster Plot label text wrapping

[michael....@gmail.com]

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 Plotand the output should look like as shown in Output Aster Plot. Can someone assist?

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

[Erik Stel]

Hi Michael,

You could have a look at the first example below. What you probably need extra is positioning the text 'height-wise' (because the text will contain multiple tspan elements). You could take its height using getBBox (similar to the second example below) and adjust the positioning accordingly (although some relative positioning using styles/CSS could also work).

    https://bl.ocks.org/mbostock/7555321 (text wrap)

    https://bl.ocks.org/mbostock/1160929 (getBBox)

Hope this helps,

Erik