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

我知道svg有一个内置函数来处理圆角，但我只需要在四个角中的两个角上处理圆角

我知道我可以画多个长方形来模仿，但这看起来有点俗气。有没有办法用剪辑或任何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制作角点，并结合使用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);
    });

实例：

可选：如果愿意，可以重构rightRoundedRect函数以使其可配置，而不必使用大量参数。这种方法将类似于D3的内置。例如，您可以使用如下所示的rect生成器：

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

---

有关该方法的更多详细信息，请参见。

仅对给出的答案进行扩展，这里有一个更全面的函数用于返回rect的路径

x: x-coordinate
y: y-coordinate
w: width
h: height
r: corner radius
tl: top_left rounded?
tr: top_right rounded?
bl: bottom_left rounded?
br: bottom_right rounded?

function rounded_rect(x, y, w, h, r, tl, tr, bl, br) {
    var retval;
    retval  = "M" + (x + r) + "," + y;
    retval += "h" + (w - 2*r);
    if (tr) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + r; }
    else { retval += "h" + r; retval += "v" + r; }
    retval += "v" + (h - 2*r);
    if (br) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + r; }
    else { retval += "v" + r; retval += "h" + -r; }
    retval += "h" + (2*r - w);
    if (bl) { retval += "a" + r + "," + r + " 0 0 1 " + -r + "," + -r; }
    else { retval += "h" + -r; retval += "v" + -r; }
    retval += "v" + (2*r - h);
    if (tl) { retval += "a" + r + "," + r + " 0 0 1 " + r + "," + -r; }
    else { retval += "v" + -r; retval += "h" + r; }
    retval += "z";
    return retval;
}

---

如果其他人最终想要绕过

rect

元素的所有角落，您可以向

rect

元素添加

rx

属性（正如@mbostock在上面的提琴中提到的）：

---

任何寻找stackmate的Eslinted版本的人-答案：

function roundedRect(x, y, w, h, r, tl, tr, bl, br) {
  let retval;
  retval = `M${x + r},${y}`;
  retval += `h${w - (2 * r)}`;
  if (tr) {
    retval += `a${r},${r} 0 0 1 ${r},${r}`;
  } else {
    retval += `h${r}`; retval += `v${r}`;
  }
  retval += `v${h - (2 * r)}`;
  if (br) {
    retval += `a${r},${r} 0 0 1 ${-r},${r}`;
  } else {
    retval += `v${r}`; retval += `h${-r}`;
  }
  retval += `h${(2 * r) - w}`;
  if (bl) {
    retval += `a${r},${r} 0 0 1 ${-r},${-r}`;
  } else {
    retval += `h${-r}`; retval += `v${-r}`;
  }
  retval += `v${((2 * r) - h)}`;
  if (tl) {
    retval += `a${r},${r} 0 0 1 ${r},${-r}`;
  } else {
    retval += `v${-r}`; retval += `h${r}`;
  }
  retval += 'z';
  return retval;
}

---

我最近发现自己有这个问题，以便在d3中制作一个顶部圆角的条形图。我对我找到的解决方案进行了分析。

@mbostock:我相信你遗漏了半径参数。我已经为你加上了这个。谢谢你的精彩回答/库！执行

.attr

时，“x”和“y”变量来自何处？e、 g.

x（0）

和

y（d.name）

Nvm，意识到它们只是引用了任意现有的data@stackmate：如何在条形图内添加图像或圆我们可以看到一个使用该方法的示例吗？非常好，灵活，四个角中的任何一个都有半径。非常好，正是我想要的。极好的解决方案！荣誉

function roundedRect(x, y, w, h, r, tl, tr, bl, br) {
  let retval;
  retval = `M${x + r},${y}`;
  retval += `h${w - (2 * r)}`;
  if (tr) {
    retval += `a${r},${r} 0 0 1 ${r},${r}`;
  } else {
    retval += `h${r}`; retval += `v${r}`;
  }
  retval += `v${h - (2 * r)}`;
  if (br) {
    retval += `a${r},${r} 0 0 1 ${-r},${r}`;
  } else {
    retval += `v${r}`; retval += `h${-r}`;
  }
  retval += `h${(2 * r) - w}`;
  if (bl) {
    retval += `a${r},${r} 0 0 1 ${-r},${-r}`;
  } else {
    retval += `h${-r}`; retval += `v${-r}`;
  }
  retval += `v${((2 * r) - h)}`;
  if (tl) {
    retval += `a${r},${r} 0 0 1 ${r},${-r}`;
  } else {
    retval += `v${-r}`; retval += `h${r}`;
  }
  retval += 'z';
  return retval;
}