How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?

Question

I want to get the start and end angles for each arc in the sunburst example as in http://bl.ocks.org/4063423:

Answer 1

You can see them in the code:

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx; })
    .innerRadius(function(d) { return Math.sqrt(d.y); })
    .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });

So your start angle is in the x attribute and x + dx give your end angle.

The trick is that the x, dx, y and dy are all set by the layout function:

var partition = d3.layout.partition()
    .sort(null)
    .size([2 * Math.PI, radius * radius])
    .value(function(d) { return 1; });

sort(null) tells it not to reorder your data size(...) tells it the output range for x and y coordinate (radius is squared because we are mapping to an area). value(...) is the value accessor for how to weight each item.

Answer 2

You can use this simple code:

...
.data(partition.nodes)
.filter(function(d) { // You're not restricted to use the "filter" function
   var startAngle = arc.startAngle()(d);
   var endAngle = arc.endAngle()(d);
});
...