在@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);
});
实时示例:
可选:如果你愿意,你可以重构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));
有关这种方法的更多详细信息,请参阅可配置函数教程。
rightRoundedRect
更改为从(x,y+height)
开始的以下内容:https://jsfiddle.net/wcyetoj7/ - blackgreen