make edges of donut curvy

Question

I have donut chart. I want to make the edge of donut to be curvy as the image shows enter image description here . I tried to use this code to achieve what I want but I can't.

var arc = d3.svg.arc()
        .innerRadius(innerRadius)
        .outerRadius(outerRadius)
        .startAngle(0);

Have you tried setting `stroke-linejoin` to `round` for the generated path? — Lars Kotthoff, Apr 03 '14 at 18:57
@LarsKotthoff The little arc segment is a closed, filled area ``, not a thick curve. — Timothy Shields, Apr 03 '14 at 19:31
@TimothyShields Still works if you stroke the path: http://jsfiddle.net/h9XNz/99/ — Lars Kotthoff, Apr 03 '14 at 19:39
@LarsKotthoff Looks like the asker is wanting half-circles on the end of the arc, not slightly-rounded corners. — Timothy Shields, Apr 03 '14 at 19:41
In any case, [this question](http://stackoverflow.com/questions/10177985/svg-rounded-corner) should help. — Lars Kotthoff, Apr 03 '14 at 19:44

score 3 · Answer 1 · answered Dec 04 '14 at 12:26

3

You can use the cornerRadius property of d3.svg.arc(), added in D3 v3.5

var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius)
    .cornerRadius(outerRadius - innerRadius)
    .startAngle(0);

http://jsfiddle.net/Lxnymj28/1/

answered Dec 04 '14 at 12:26

Marjan

1,378
1
14
21

3

cornerRadius is a bit buggy, I don't know if that is because of d3 or just how SVGs work. It glitches out if you have an arc approaching 360 degrees or something like 1 degree. – Nikolay Dyankov Sep 22 '15 at 12:39

score 2 · Answer 2 · answered Apr 03 '14 at 19:39

2

The d3.svg.arc() generator assumes you are giving it a single datum, not a list data. It therefore assumes that each of startAngle, endAngle, innerRadius, outerRadius is either a constant or a function of the single datum.

You cannot directly make the ends of the arc rounded over using this generator.

You could, however, draw two circles over the endpoints of the arc, using arc.centroid(startAngle) and arc.centroid(endAngle) as their centers and (outerRadius-innerRadius)/2 as their radius. This will give you the rounded-over appearance.

Documentation: arc.centroid

answered Apr 03 '14 at 19:39

Timothy Shields

75,459
18
120
173

I did as you said check this [jsfiddle](http://jsfiddle.net/gjA73/2/). But I can't get transition for second circle. – user3002180 Apr 05 '14 at 16:22
You seem to be animating the text with no problems. Just animate the second circle the same way. – Timothy Shields Apr 05 '14 at 18:50

make edges of donut curvy

2 Answers2