Drawing a sector of sunburst diagram using d3.js

Question

I need to draw a sunburst diagram like this:

As you can see , this is actually a sector of sunburst diagram. Can I set a startAngle and endAngle for the main circle/arc?

Edit: My diagram is like: https://bl.ocks.org/mbostock/4063423

Answer 1

Is this what you are looking for ?

Here is the changing part :

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

var arc = d3.svg.arc()
    .startAngle(function(d) { return d.x - Math.PI / 2; }) // Previously : .startAngle(function(d) { return d.x; })
    .endAngle(function(d) { return d.x + d.dx - Math.PI / 2; }) // Previously : .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); });

See live demo : JSFiddle

Answer 2

You definitely can set startAngle and endAngle to circle.

see code snippest from sunburst diagram.

var arc = d3.svg.arc()
        .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
        .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
        .innerRadius(function(d) { return Math.max(0, d.y ? y(d.y) : d.y); })
        .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); });