有没有办法为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

您需要做的就是指定一个角半径。但是，cornerRadius只是d3的新增内容，因此它不能在SO片段编辑器中当前可用的任何版本中使用。

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

＆＃13;

＆＃13;

(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));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

(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