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