使甜甜圈的边缘弯曲答案

【问题标题】：make edges of donut curvy使甜甜圈的边缘弯曲
【发布时间】：2014-05-15 18:42:19
【问题描述】：

我有donut chart。我想让甜甜圈的边缘弯曲，如图所示。我尝试使用此代码来实现我想要的，但我做不到。

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

【问题讨论】：

【解决方案1】：

您可以使用 D3 v3.5 中添加的 d3.svg.arc() 的 cornerRadius 属性

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

【讨论】：

【解决方案2】：

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

您不能使用此生成器直接使圆弧的末端四舍五入。

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

【讨论】：