Обтекание текста метки Aster Plot d3js

В настоящее время мы разрабатываем Aster Plot с использованием D3J. Существует требование обернуть текст метки в ориентацию. Ориентация достигнута, но проблемы с переносом. Теперь он выглядит как 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
        };
    }

0 ответов

Другие вопросы по тегам