svg / d3.js rounded corners on one side of a rectangle

Question

I know svg has an in built function to do rounded corners, but I need to do rounded corners on only 2 of the four corners.

I know I can draw multiple rectangles on top of each other to imitate that, but that seems kind of cheesy. Any way to do it using clipping or any d3.js method?

Right now I have a horizontal bar graph that has rects like:

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

I'm trying to produce rounded corners on the right hand side of the rect, but not sure how to do it.

Extortionate

Answer 1

Expanding on @robert-longson's answer, you can use SVG's elliptical arc commands to make the corners, in conjunction with lineto commands for the straight edges. These are used with path elements. Here's one possible implementation:

// Returns path data for a rectangle with rounded right corners.
// The top-left corner is ⟨x,y⟩.
function rightRoundedRect(x, y, width, height, radius) {
  return "M" + x + "," + y
       + "h" + (width - radius)
       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
       + "v" + (height - 2 * radius)
       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
       + "h" + (radius - width)
       + "z";
}

You can then call this function to compute the "d" attribute. For example:

rects.enter().append("path")
    .attr("d", function(d) {
      return rightRoundedRect(x(0), y(d.name), x(d.value) - x(0), y.rangeBand(), 10);
    });

Live example:

• http://bl.ocks.org/3468167

Optional: If you like, you could refactor the rightRoundedRect function to make it configurable, rather than taking lots of arguments. This approach would be similar to D3's built-in shape generators. For example, you might use a rect generator like so:

rects.enter().append("path")
    .attr("d", rightRoundedRect()
      .x(x(0))
      .y(function(d) { return y(d.name); })
      .width(function(d) { return x(d.value) - x(0); })
      .height(y.rangeBand())
      .radius(10));

For more details on that approach, see the configurable function tutorial.

Beatrizbeattie

outstanding answer. For rounding the two upper-side corners in vertical bar charts, I changed rightRoundedRect to this, starting at (x,y+height): jsfiddle.net/wcyetoj7 – Onagraceous

Answer 2

Just to expand on the answers given, here is a more comprehensive function to return the path for your rect.

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

Zajac

@stackmate: how to add image or circle inside the bar – Expand

can we see an example of this being used? – Salmonoid

Excellent, flexible to have any of the four corners with the radius on. very good and just what I was after. – Iluminadailwain

Excellent solution! Kudos – Thermosiphon

you are a saviour bro thanks – Pocked

Answer 3

In case others end up here wanting to round all corners of a rect element, you can add an rx attribute to the rect element (as @mbostock mentions in his fiddle above):

var rectangle = group.append("rect")
    .attr("width", 60)
    .attr("height", 75)
    .attr("rx", 4)
    .style("fill", function(d) { return "#e6653e"; })
    .style("stroke", function(d) { return d3.rgb("#e6653e").darker(); })

Hornback

Answer 4

Anyone who looks for an Eslinted version of stackmate -s answer:

function roundedRect(x, y, w, h, r, tl, tr, bl, br) {
  let 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;
}

Repentance

Answer 5

d3.js code sample for @stackmate above solution

svg
.select(".roundedRectBox")
.attr("d", roundedRect(0, 0, 50, 50, 15, 0, 0, 15, 15))
.attr("fill", "#ff0000");

and svg code

<svg>
  <path className="roundedRectBox" />
</svg>

Fumigator