使圆环弯曲的边缘

我有donut chart。我想让甜甜圈的边缘弯曲，因为图像显示为 enter image description here 。我试图用这个代码来实现我想要的，但我不能。使圆环弯曲的边缘

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

来源

2014-04-03 user3002180

你试过设置'卒中linejoin'到'round'为生成的路径？ –

@LarsKotthoff小圆弧段是一个封闭的填充区域''，不是一个很厚的曲线。 –

@TimothyShields仍然有效，如果你描边路径：http://jsfiddle.net/h9XNz/99/ –

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

使用此生成器不能直接将圆弧的末端倒圆角。

你可以，但是，画两个圈超过圆弧的端点，使用arc.centroid(startAngle)和arc.centroid(endAngle)作为他们的中心和(outerRadius-innerRadius)/2作为其半径。这会给你圆润的外观。

文档：arc.centroid

来源

2014-04-03 19:39:41

我按照你说的做了检查[jsfiddle]（http://jsfiddle.net/gjA73/2/）。但我无法获得第二个圈子的转换。 – user3002180

你似乎在动画文本没有问题。以同样的方式制作第二个圆。 –

可以使用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/

来源

2014-12-04 12:26:38 Marjan

cornerRadius是有点马车，我不知道这是否是因为D3或只是如何SVGs工作。如果你有接近360度或类似1度的弧它毛刺出来。 –

使圆环弯曲的边缘

回答

相关问题