javascript - 消除矩形中间的边界半径

Question

如何在我的图表中设置条形图的样式以具有 border-radius，如下面的快照所示？

这是我尝试过的:

我选择了所有 rect 并做了，

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

但是它did not give desired effect .
我提到了这个例子 here .

我该如何解决这个问题？

jsFiddle

Answer 1

<rect> SVG 元素不允许仅圆化某些特定的 Angular 。你必须使用 <path> SVG 元素。可以使用svg / d3.js rounded corner on one corner of a rectangle中stackmate给出的函数构建路径:

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> 的名称属性对应于路径字符串，第二个属性是从您的数据生成此字符串的函数。

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 像你的快照中那样四舍五入矩形。