How to properly rotate text labels in a D3 sunburst diagram

Question

In the following D3 sunburst :

http://jsfiddle.net/maxl/eabFC/

.attr("transform", function(d) {
    return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")";
});

The labels in the left quadrants are upside down, I would like to perform a rotation on them so that the text reads from left to right.

The transformation should only apply to the arcs from approximately 100 degree to 270 degree.

Answer 1

Following this example: http://www.jasondavies.com/coffee-wheel/

I've edited your jsfiddle here: http://tributary.io/inlet/4127332/

You are going to have to deal with your long labels and the above example shows how to do multi-line.

Also note that you are using an old version of d3, it is no longer necessary to call d3.layout separately. Here is the link to new shiny version of d3:

 <script src="http://d3js.org/d3.v3.js"></script>