svg / d3.js 矩形一侧的圆角

我知道 svg 有一个内置函数可以做圆角，但我只需要在四个角中的 2 个上做圆角。

我知道我可以在彼此之上绘制多个矩形来模仿这一点，但这看起来有点俗气。有什么方法可以使用剪辑或任何 d3.js 方法来做到这一点吗？

现在我有一个水平条形图，其中有如下矩形：

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

我正在尝试在矩形的右侧生成圆角，但不知道该怎么做。

扩展 @robert-longson 的答案，您可以使用 SVG椭圆弧命令制作角落，结合线路命令对于直边。这些与使用路径元素。这是一种可能的实现：

// Returns path data for a rectangle with rounded right corners.
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

然后您可以调用此函数来计算“d”属性。例如：

rects.enter().append("path")
    .attr("d", function(d) {
      return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
    });

实例：

• http://bl.ocks.org/3468167

选修的：如果你愿意，你可以重构 rightRoundedRect 函数来使其可配置，而不是采取很多论点。这种方法类似于 D3 的内置方法形状生成器。例如，您可以使用如下所示的矩形生成器：

rects.enter().append("path")
    .attr("d", rightRoundedRect()
      .x(x(0))
      .y(function(d) { return y(d.name); })
      .width(function(d) { return x(d.value) - x(0); })
      .height(y.rangeBand())
      .radius(10));

有关该方法的更多详细信息，请参阅可配置功能教程.