4

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.

VividD
  • 10,456
  • 6
  • 64
  • 111
Max L.
  • 9,774
  • 15
  • 56
  • 86
  • A suggestion I would offer, which does not follow directly with your question, is to not have the labels attached to the arcs, but rather provide a key off to one side and/or tooltip rollovers (using `tipsy.js`, for example). It will decrease the visual clutter and provide better visual parsing of the graph. – Nicholas Pappas Dec 20 '12 at 16:30

1 Answers1

6

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>
PhoebeB
  • 8,434
  • 8
  • 57
  • 76