javascript - How to properly rotate text labels in a D3 sunburst diagram - Stack Overflow

admin管理员组

文章数量:1400336

In the following D3 sunburst :

/

.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.

In the following D3 sunburst :

http://jsfiddle/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.

• javascript
• d3.js
• label
• hierarchy
• sunburst-diagram

Share Improve this question Follow edited Jul 3, 2014 at 11:11 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Dec 19, 2012 at 18:40 BoutranBoutran 10.1k1616 gold badges5959 silver badges8686 bronze badges 1

• 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 Commented Dec 20, 2012 at 16:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Following this example: http://www.jasondavies./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/d3.v3.js"></script>

本文标签： javascriptHow to properly rotate text labels in a D3 sunburst diagramStack Overflow