我知道svg有一个内置的功能来做圆角,但我只需要在四个角中的2个上做圆角。
我知道我可以画多个矩形在彼此的顶部来模仿,但这似乎有点俗气。有什么方法可以用裁剪或任何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); })
我试图在矩形的右手边产生圆角,但不知道如何做。
5条答案
按热度按时间btqmn9zl1#
扩展@robert-longson的答案,您可以使用SVG的椭圆弧命令来生成角,并结合使用lineto命令来生成直边。这些命令与path elements一起使用。下面是一个可能的实现:
然后,您可以调用此函数来计算“d”属性。例如:
示例:
**可选:**如果您愿意,可以重构rightRoundedRect函数,使其 * 可配置 *,而不是使用大量参数。这种方法类似于D3的内置shape generators。例如,您可以使用如下所示的矩形生成器:
有关该方法的更多详细信息,请参见configurable function tutorial。
bfhwhh0e2#
只是为了扩展给出的答案,这里有一个更全面的函数来返回rect的路径。
im9ewurl3#
如果其他人在这里想要圆化
rect
元素的 * 所有 * 角,您可以向rect
元素添加一个rx
属性(正如@mbostock在上面提到的):fhity93d4#
任何人谁寻找一个Eslint版本的stackmate -的答案:
pbgvytdp5#
上述@stackmate解决方案的d3.js代码示例
和SVG代码