d3仅在第一个和最后一个矩形上使用圆角的单个堆叠图表

Question

我有一个堆叠的图表，我需要对角进行舍入，我尝试添加.attr（“rx”，10）和ry，10。但是这样所有的行为都会变得圆润，这不是我需要的，第一个需要一个左圆角，最后一个需要一个右圆角。

这是图表js

var datavars = [224, 84, 29];
var colors = ['green','blue','darkgray'];

var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 100);

svg.selectAll('rect')
.data(datavars)
.enter()
.append('rect')
.attr('width', function(d){
    return d;})
               .attr('x',function(d, i){
               return sum(datavars, 0, i); })
.attr('fill', function(d, i){ return colors[i]; })
.attr('y',0)
.attr('height', 30);


function sum(array, start, end) {
    var total = 0;
    for(var i=start; i<end; i++) total += array[i];
  return total;
}

有什么想法吗？