CODEWITHSUNDEEP
javascriptd3.jssvg
Rakesh
Rakesh

Reputation: 75

D3.js how to make the lines not go inside the arc of a donut chart

I want to make a donut chart with text labels as per this example:

donut chart

However, I dont want the lines to enter into the inner area of the arc. I just want them to touch the circumference of the arc without entering it.

Does D3.js provide any ready made functions to find out the center of the arc circumference or is there any other way using SVG to modify the lines.

Upvotes: 1

Views: 603

Answers (1)

altocumulus
altocumulus

Reputation: 21578

Probably the easiest way will be to rearrange the order of the elements. Because SVGs elements will be drawn in document order this will have the effect of elements being rendered on top of other elements which they succeed. The example uses three groups to arrange the slices, the text labels and the lines. 

svg.append("g").attr("class", "slices");   // 1.
svg.append("g").attr("class", "labels");   // 2.
svg.append("g").attr("class", "lines");    // 3.

By putting the <g> for the slices to the end this will cover part of the lines giving the look like they ended on the outer arc of the slices.

svg.append("g").attr("class", "labels");   // 2.
svg.append("g").attr("class", "lines");    // 3.
svg.append("g").attr("class", "slices");   // 1.

There is no need for further adjustements. Have a look at this working example.

Upvotes: 4

Related Questions