html svg折线带圆角,SVG / d3.js上的矩形的一个角的圆角(svg / d3.js rounded corner

我知道SVG有一个内置的功能做圆角，但我需要做的仅在四角的2圆角。

我知道我可以互相模仿的是顶部绘制多个矩形，但似乎有点俗气。 任何方式使用裁剪或任何d3.js的方法来做到这一点？

现在我有了rects像一个水平条形图：

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

我试图产生对RECT的右手边圆角，但不知道如何去做。

Answer 1:

扩大对@罗伯特- longson的回答，您可以使用SVG的椭圆弧命令作出的角落，会同了lineTo命令为直边。 这些用于与路径元件 。 这里是一个可能实现：

// 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