title: Round One Side of D3 Arc
body: <p>I'm using D3.js's built-in arc function to generate SVG <code>&lt;path&gt;</code>s for my data. </p>
  
  <pre><code>.attr("d", function(element, index) {
  
      var arc = d3.arc()
          .innerRadius(iR)
          .outerRadius(iR + 10)
          .startAngle(element[1])
          .endAngle(element[2])
          .cornerRadius(isRounded ? cR : 0);
  
      return arc();
  
  });
  </code></pre>
  
  <p>This works perfectly, but I'd like to round one side (both corners) of certain arcs. When a corner radius is supplied with <code>.cornerRadius()</code>, however, it rounds all four corners. </p>
  
  <p>I know there are <a href="https://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corner-on-one-corner-of-a-rectangle">various</a> <a href="https://stackoverflow.com/questions/10177985/svg-rounded-corner">ways</a> to selectively round the corners of <em>rectangles</em>, but I'm hoping there's some generic way to do this for arcs.</p>
  
  <p>I also saw <a href="https://stackoverflow.com/questions/30706466/adding-round-corners-to-only-one-side-of-the-arc">this question</a> about rounding only some corners of an arc, but it has no answer (and D3 v4 has come out since it was posted). </p>