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

Question

I would like to create rounded corners for svg arc.

Here is my code for above 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

All you need to do is specify a corner radius. However, cornerRadius is only a recent addition to d3, so it won't work in any of the versions currently available in the SO snippet editor.

You can see it working below, using the latest version of d3 imported directly from d3js.org:

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