D3.jsのグラフを角丸にする

角丸にしたい棒グラフなどの.append("rect")がかいてあるところに.attr("rx", 4)と.attr("ry", 4)を追加するだけで実現するようです。

    .attr("rx", 4)
    .attr("ry", 4)

追加例：

var chart = d3.select("#chart")
    .append('svg')
    .append("g")
    .data(pie(datas))
    .attr('width', width)
    .attr('height', height);

chart.selectAll("rect.right")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", 5)
    .attr("y", function (d) {
      return y(d.label) + 5;
    })
    .attr("rx", 4)
    .attr("ry", 4)
    .attr("class", "right")
    .attr("height", y.rangeBand() - 20)
    .attr("width", 0)
    .transition()
    .duration(500)
    .delay(function(d,i) { return 30 * i; })
    .attr("width", function (d) {
      return xFrom(d[rCol]);
    }); 

参考：d3.jsでrectに角丸・半透明・グラデーション・ドロップシャドウ・ライティング効果を追加～主にsvgのこと