0

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
        };
    }
Amar Chand Nagisetty
  • 1
  • 1
  • There is no value `right` for text-anchor. It has to be `start`, `middle` or `end`. In your case, it should be `end`. – Gerardo Furtado Feb 10 '18 at 09:55
  • Possible duplicate of [d3js aster plot label display as arc](https://stackoverflow.com/questions/48717564/d3js-aster-plot-label-display-as-arc) – Aditya Feb 11 '18 at 07:25
  • Thanks Gerardo Furtado, We have tried with “end” instead of “right”, but output is not as expected. Please refer to output https://drive.google.com/open?id=1Vs4agcJ5eqMtq0xV16o_tHp97rnDDdJd – Amar Chand Nagisetty Feb 13 '18 at 19:55

0 Answers0