In my visualization, the labels are arranged around the center of a circle by rotation. However, this results in the labels on the left side of the circle appearing upside down. Is there a way to rotate the labels on the left side independently after the initial rotation?
The visualization is based on the zoomable sunburst from the d3js.org
Here is the relevant code:
function computeTextRotation(d) {
var angle=(d.x +d.dx/2)*180/Math.PI - 90;
return angle;
}
var texts = svg.selectAll("text")
.data(partitioned_data)
.enter().append("text")
.filter(filter_min_arc_size_text)
.attr("transform", function(d) {return "rotate(" + computeTextRotation(d) + ")"})
.attr("x", function(d) { return radius / 3 * d.depth; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d,i) {return d.name})
I attempted to modify the code below in order to achieve independent rotation for the labels based on their position, but faced challenges in passing the coordinates d.x and d.y.
var texts = svg.selectAll("text")
.data(partitioned_data)
.enter().append("text")
.filter(filter_min_arc_size_text)
.attr("transform", function(d) {
if (computeTextRotation(d)>90&&computeTextRotation(d)<270) {
return "rotate(" + computeTextRotation(d) + ") rotate(d.x,d.y,180)";
} else {
return "rotate(" + computeTextRotation(d) + ")";
}})
.attr("x", function(d) { return radius / 3 * d.depth; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d,i) {return d.name})