有没有办法为 SVG ARC 创建圆角？

Question

我想为 svg arc 创建圆角。

这是我的上述弧线代码

(function() 
{ 
     var svg = d3.select('#pieChart').append("svg:svg").attr('width', 300).attr('height', 300).attr('fill', '#123456').append("g").attr("transform", "translate(" + 300 / 2 + "," + 300 / 2 + ")"); 
     var arc = d3.svg.arc().innerRadius(100).outerRadius(140).startAngle(0).endAngle(190 * (Math.PI)/180); 
     svg.append("path").attr('d', arc); 
}());

Answer 1

如果添加笔划，则可以在笔划上适当设置属性以呈现圆角 - 这是粗略的想法：

(function() 
{ 
     var svg = d3.select('#pieChart').append("svg:svg").attr('width', 300).attr('height', 300).append("g").attr("transform", "translate(" + 300 / 2 + "," + 300 / 2 + ")"); 
     var arc = d3.svg.arc().innerRadius(100).outerRadius(100).startAngle(0).endAngle(190 * (Math.PI)/180); 
     svg.append("path").attr('stroke-width','60px').attr('stroke-linejoin','round').attr('d', arc).attr('fill', '#123456').attr('stroke','#123456'); 
}());

Demo fiddle here

Answer 2

您需要做的就是指定一个角半径。但是，cornerRadius 只是最近添加到 d3 中，因此它不适用于 SO 代码段编辑器中当前可用的任何版本。

您可以在下面看到它正在运行，使用直接从 d3js.org 导入的最新版本的 d3：

(function(theta) { 
  var svg = d3.select('#pieChart')
    .append("svg:svg")
    .attr('width', 300)
    .attr('height', 300)
    .attr('fill', '#123456')
    .append("g")
    .attr("transform", "translate(" + 300 / 2 + "," + 300 / 2 + ")"); 
  var arc = d3.svg.arc()
 /*************************************************/
 /* This only works in the latest version (3.5.5) */
    .cornerRadius(20)
 /*************************************************/
    .innerRadius(100)
    .outerRadius(140)
    .startAngle(0)
    .endAngle(theta * (Math.PI)/180)
  svg.append("path")
    .attr('d', arc)
}(240));

<!-- Import the latest version of d3 directly: -->
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="pieChart"></div>

有没有办法为 SVG ARC 创建圆角？

Is there any way to create rounded corners for SVG ARC?

svg

d3.js