title: svg / d3.js rounded corners on one side of a rectangle
body: <p>I know svg has an in built function to do rounded corners, but I need to do rounded corners on only 2 of the four corners.</p>
  
  <p>I know I can draw multiple rectangles on top of each other to imitate that, but that seems kind of cheesy.  Any way to do it using clipping or any d3.js method?</p>
  
  <p>Right now I have a horizontal bar graph that has rects like:</p>
  
  <pre><code>    rects.enter().append("rect")
          .attr("x",function(d,i) { return x(0); })
          .attr("width",function(d) { return x(d.value) - x(0); })
          .attr("height",y.rangeBand())
          .attr("y",function(d) { return y(d.name); })
  </code></pre>
  
  <p>I'm trying to produce rounded corners on the right hand side of the rect, but not sure how to do it.  </p>