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?

Answer 1

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.