javascript - Round One Side of D3 Arc -

i'm using d3.js's built-in arc function generate svg <path>s data.

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

this works perfectly, i'd round 1 side (both corners) of arcs. when corner radius supplied .cornerradius(), however, rounds 4 corners.

i know there various ways selectively round corners of rectangles, i'm hoping there's generic way arcs.

i saw this question rounding corners of arc, has no answer (and d3 v4 has come out since posted).

even v4 api, still no straight-forward way this. looking @ source code, cornerradius becomes fixed value calculation of whole arc (all 4 corners). easiest fix append 2 arcs every data point 2nd arc filling in corners.

example, have nicely rounded arcs:

      var myarcs = [          [0, 45],          [180, 300]        ];          var vis = d3.select('body')          .append('svg')          .attr('width', 400)          .attr('height', 400);          var arc = d3.arc()          .innerradius(80)          .outerradius(150)          var somearcs = vis.selectall('path')          .data(myarcs)          .enter();          somearcs          .append("path")          .attr("transform", "translate(200,200)")          .attr("d", function(d) {            arc.startangle(d[0] * (math.pi / 180))              .endangle(d[1] * (math.pi / 180))              .cornerradius(20);            return arc();          })          .attr("fill", function(d, i) {            return d3.schemecategory10[i];          });

<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

my fix like:

var myarcs = [        [0, 45],        [180, 300]      ];        var vis = d3.select('body')        .append('svg')        .attr('width', 400)        .attr('height', 400);        var arc = d3.arc()        .innerradius(80)        .outerradius(150)        var somearcs = vis.selectall('path')        .data(myarcs)        .enter();        somearcs        .append("path")        .attr("transform", "translate(200,200)")        .attr("d", function(d) {          arc.startangle(d[0] * (math.pi / 180))            .endangle(d[1] * (math.pi / 180))            .cornerradius(20);          return arc();        })        .attr("fill", function(d, i) {          return d3.schemecategory10[i];        });        somearcs        .append("path")        .attr("transform", "translate(200,200)")        .attr("d", function(d) {          arc.startangle(d[0] * (math.pi / 180))            .endangle((d[0] + 10) * (math.pi / 180))            .cornerradius(0);          return arc();        })        .attr("fill", function(d, i) {          return d3.schemecategory10[i];        });

  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>