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 + "," + 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));

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

Answer 2:

只是为了给出答案扩大，这里是一个更全面的函数返回的路径，你的矩形。

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;

}

Answer 3:

在其他情况下，最终在这里想圆一个的各个角落rect元素，你可以在添加rx属性的rect元素(如@mbostock在他的小提琴提到以上)：

var rectangle = group.append("rect")

.attr("width", 60)

.attr("height", 75)

.attr("rx", 4)

.style("fill", function(d) { return "#e6653e"; })

.style("stroke", function(d) { return d3.rgb("#e6653e").darker(); })

Answer 4:

你可以使用描绘出两个圆角矩形的路径。

Answer 5:

任何人谁寻找stackmate -s答案的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;

}

文章来源: svg / d3.js rounded corner on one corner of a rectangle