Javascript 使甜甜圈的边缘弯曲

我有。我想让甜甜圈的边缘如图所示是弯曲的。我试图用这段代码来实现我想要的，但我做不到

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

d3.svg.arc（）。因此，它假设
startAngle
，
endAngle
，
innerRadius
，
outerRadius
中的每一个都是一个常数或单个
基准的函数

不能使用此生成器直接使圆弧的端点圆化

但是，您可以使用
圆弧形心（startAngle）
和
圆弧形心（endAngle）
作为圆心，使用
（外圆内半径）/2
作为半径，在圆弧的端点上绘制两个圆。这将给你一个圆润的外观

文档：
d3.svg.arc（）。因此，它假设
startAngle
，
endAngle
，
innerRadius
，
outerRadius
中的每一个都是一个常数或单个
基准的函数

不能使用此生成器直接使圆弧的端点圆化

但是，您可以使用
圆弧形心（startAngle）
和
圆弧形心（endAngle）
作为圆心，使用
（外圆内半径）/2
作为半径，在圆弧的端点上绘制两个圆。这将给你一个圆润的外观

文档：
您可以使用d3.svg.arc（）的属性，该属性是在d3 v3.5中添加的

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

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

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

您是否尝试过为生成的路径设置
笔划线条连接
为
圆形
。@Larskothoff小圆弧段是一个封闭的填充区域
，不是一条粗曲线。@Timothyshiels如果您笔划路径仍然有效：@Larskothoff看起来像是asker想要在圆弧末端画半个圆，不是略微圆角。在任何情况下，都应该有帮助。您是否尝试过将生成的路径的
笔划线条连接
设置为
圆角
？@larskothoff小圆弧段是一个封闭的填充区域
，不是一条很粗的曲线。@TimothyShields如果你划过这条路径仍然有效：@LarsKotthoff看起来询问者想要的是圆弧末端的半圆，而不是略微圆角。无论如何，应该会有帮助。我按照你说的做了检查。但我无法为第二个圆进行过渡。你似乎在为文本设置动画，没有任何问题。用同样的方法制作第二个圆的动画。我按照你说的做了检查。但我无法为第二个圆进行过渡。你似乎在为文本设置动画，没有任何问题。用同样的方法制作第二个圆的动画。cornerRadius有点问题，我不知道这是因为d3还是SVG的工作原理。如果圆弧接近360度或类似于1度，就会出现小故障。cornerRadius有点问题，我不知道这是因为d3还是SVG的工作原理。如果你有一个接近360度或类似于1度的圆弧，它就会出现小故障。