d3js Aster Plot标签文字包装

时间:2018-02-10 09:49:41

标签: jquery d3.js aster

我们目前正在使用D3J设计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
        };
    }

0 个答案:

没有答案