CODEWITHSUNDEEP
javascriptd3.jslabelhierarchysunburst-diagram
Boutran
Boutran

Reputation: 10124

How to properly rotate text labels in a D3 sunburst diagram

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.

Upvotes: 4

Views: 8676

Answers (1)

PhoebeB
PhoebeB

Reputation: 8570

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>

Upvotes: 6

Related Questions