消除矩形中间的边界半径 [英] eliminate border-radius in the interim of the rectangles

问题描述

如何在下面的快照中为图表设置 border-radius 的风格？

How do I style the bars to have border-radius in my chart as in the snapshot below?

这里是我尝试：

我选择了所有 rect ，并且，

  .attr("rx", 10)
  .attr("ry", 10)

但它没有达到预期效果 。

我参考了这里的例子。

如何解决此问题？

jsFiddle

推荐答案

< rect& c $ c> SVG元素不允许只舍入一些特定的角。您必须使用< path> SVG元素。您可以在 svg中使用stackmate提供的函数/ d3.js在矩形的一个角上的圆角构建路径：

The <rect> SVG element doesn't allow to round only some specific corners. You have to use the <path>SVG element. You can use the function given by stackmate in svg / d3.js rounded corner on one corner of a rectangle to build the path:

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

然后你必须在D3.js attr（）函数。第一个参数是d对应于路径字符串的< path> 属性的名称，属性是从您的数据生成此字符串的函数。

Then you have to call this function inside the D3.js attr() function. The first parameter is "d" the name of the <path> attribute corresponding to the path string and the second attribute is a function generating this string from your data.

episode.selectAll("rect")
   .data(function(d) { return d.ages;})
   .enter()
   .append("path")
   .attr("d",function(d){
               var round;
               if(d.y0==0){
                 round=false;
               }else{
                 round=true;
               }
               return rounded_rect(0,
                                   y(d.y1),
                                   x.rangeBand(),
                                   y(d.y0)-y(d.y1),
                                   10,round,round,false,false);})
    .style("fill", function(d) { return color(d.name); });  

这里是 fork 你的jsFiddle四舍五入矩形，如你的快照。

Here is a fork of your jsFiddle rounding the rectangles as in your snapshot.

这篇关于消除矩形中间的边界半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！