使甜甜圈的边缘弯曲

Question

我有donut chart。我想让甜甜圈的边缘弯曲，因为图像显示。我尝试使用此代码来实现我想要的但我无法实现。

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

Answer 1

d3.svg.arc()生成器假设您为其提供了一个datum，而不是列表data。因此，假设startAngle，endAngle，innerRadius，outerRadius中的每一个都是单个datum的常量或函数。

使用此生成器无法直接使弧的末端四舍五入。

但是，您可以在弧的端点上绘制两个圆，使用arc.centroid(startAngle)和arc.centroid(endAngle)作为中心，(outerRadius-innerRadius)/2作为半径。这将为您提供圆润的外观。

文档：arc.centroid

Answer 2

您可以使用d3.svg.arc（）的cornerRadius属性，在D3 v3.5中添加

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

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