有没有办法为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在下面看到它:

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