eliminate border-radius in the interim of the rectangles

Question

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

enter image description here

Here is what I tried:

I selected all rect and did,

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

But it did not give desired effect.
I had referred the example here.

How do I fix this?

jsFiddle

I don't know d3.js but in SVG, to draw a rect with only 2 rounded corners, you need to define a path, you can't use a `rect`. — Denys Séguret, Feb 18 '14 at 12:28
possible duplicate of this question http://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corner-on-one-corner-of-a-rectangle — Ruskin, Feb 18 '14 at 12:40
This [**`link`**](http://bl.ocks.org/mbostock/3468167) will of course will help you to achieve that. — Unknown User, Feb 18 '14 at 12:42
@UnknownUser I tried that code, but it is adding another shape to the chart: http://jsfiddle.net/rdesai/5stce/5/ — Rahul Desai, Feb 19 '14 at 04:26
@Rahul - We cannot do it with the `rect` property of svg i guess so. All i found is this [**`fiddle`**](http://jsfiddle.net/AkMag/) which I created from the this [**`post`**](http://stackoverflow.com/questions/12914228/d3-custom-bar-chart-bars-using-svg-paths-instead-of-rects). And the rounded corners are being created using `path` not rect. — Unknown User, Feb 19 '14 at 08:13
@RahulDesai, in snapshot figure is polygon, not a rectangle with rounded corners. — maximkou, Feb 19 '14 at 12:56
@maximkou I agree, but I would like to make it rounded corners. — Rahul Desai, Feb 19 '14 at 12:58
@RahulDesai, see http://stackoverflow.com/questions/12115691/svg-d3-js-rounded-corner-on-one-corner-of-a-rectangle — maximkou, Feb 19 '14 at 13:09
@maximkou: I dont know how to integrate that code in my code :( — Rahul Desai, Feb 19 '14 at 13:12
@maximkou: I tried that code, but it is adding another shape to the chart: http://jsfiddle.net/rdesai/5stce/5/ — Rahul Desai, Feb 19 '14 at 17:32

score 1 · Accepted Answer · edited May 23 '17 at 12:05

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

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

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

eliminate border-radius in the interim of the rectangles

1 Answers1

Linked