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