I know svg has an in built function to do rounded corners, but I need to do rounded corners on only 2 of the four corners.
我知道svg有一个内置功能来做圆角,但我需要在四个角中的两个角上做圆角。
I know I can draw multiple rectangles on top of each other to imitate that, but that seems kind of cheesy. Any way to do it using clipping or any d3.js method?
我知道我可以在彼此之上绘制多个矩形来模仿它,但这看起来有点俗气。有什么方法可以使用剪辑或任何d3.js方法吗?
Right now I have a horizontal bar graph that has rects like:
现在我有一个水平条形图,其形状如下:
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); })
I'm trying to produce rounded corners on the right hand side of the rect, but not sure how to do it.
我正试图在矩形的右侧产生圆角,但不知道该怎么做。
5 个解决方案
#1
57
Expanding on @robert-longson's answer, you can use SVG's elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here's one possible implementation:
扩展@ robert-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";
}
You can then call this function to compute the "d" attribute. For example:
然后,您可以调用此函数来计算“d”属性。例如:
rects.enter().append("path")
.attr("d", function(d) {
return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
});
Live example:
Optional: If you like, you could refactor the rightRoundedRect function to make it configurable, rather than taking lots of arguments. This approach would be similar to D3's built-in shape generators. For example, you might use a rect generator like so:
可选:如果您愿意,可以重构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));
For more details on that approach, see the configurable function tutorial.
有关该方法的更多详细信息,请参阅可配置功能教程。
#2
29
Just to expand on the answers given, here is a more comprehensive function to return the path for your rect.
只是为了扩展给出的答案,这里有一个更全面的函数来返回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;
}
#3
7
In case others end up here wanting to round all corners of a rect
element, you can add an rx
attribute to the rect
element (as @mbostock mentions in his fiddle above):
如果其他人最终想要对rect元素的所有角进行舍入,则可以向rect元素添加一个rx属性(如上面提到的@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(); })
#4
3
You could use a path that traces out a rectangle with two rounded corners.
您可以使用描绘出具有两个圆角的矩形的路径。
#5
2
Anyone who looks for an Eslinted version of stackmate -s answer:
任何寻找Eslinted版本的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;
}
#1
57
Expanding on @robert-longson's answer, you can use SVG's elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here's one possible implementation:
扩展@ robert-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";
}
You can then call this function to compute the "d" attribute. For example:
然后,您可以调用此函数来计算“d”属性。例如:
rects.enter().append("path")
.attr("d", function(d) {
return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
});
Live example:
Optional: If you like, you could refactor the rightRoundedRect function to make it configurable, rather than taking lots of arguments. This approach would be similar to D3's built-in shape generators. For example, you might use a rect generator like so:
可选:如果您愿意,可以重构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));
For more details on that approach, see the configurable function tutorial.
有关该方法的更多详细信息,请参阅可配置功能教程。
#2
29
Just to expand on the answers given, here is a more comprehensive function to return the path for your rect.
只是为了扩展给出的答案,这里有一个更全面的函数来返回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;
}
#3
7
In case others end up here wanting to round all corners of a rect
element, you can add an rx
attribute to the rect
element (as @mbostock mentions in his fiddle above):
如果其他人最终想要对rect元素的所有角进行舍入,则可以向rect元素添加一个rx属性(如上面提到的@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(); })
#4
3
You could use a path that traces out a rectangle with two rounded corners.
您可以使用描绘出具有两个圆角的矩形的路径。
#5
2
Anyone who looks for an Eslinted version of stackmate -s answer:
任何寻找Eslinted版本的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;
}