javascript - svg/d3.js 矩形一侧的圆 Angular

Question

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

我知道我可以在彼此的顶部绘制多个矩形来模仿它，但这看起来有点俗气。有什么方法可以使用剪辑或任何 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); })

我正在尝试在矩形的右侧制作圆 Angular ，但不确定该怎么做。

Answer 1

扩展@robert-longson 的回答，您可以使用 SVG 的 elliptical arc commands与lineto commands一起制作 Angular 落对于直边。这些与 path elements 一起使用.这是一种可能的实现方式:

// 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 的内置 shape generators。 .例如，您可以像这样使用矩形生成器:

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

有关该方法的更多详细信息，请参阅 configurable function tutorial .