Clipped Paths in d3.js (AKA clipPath)

The following post is a portion of the book D3 Tips and Tricks which is free to download from Leanpub. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

Clipped Path (AKA clipPath)

A clipPath is the path of a SVG shape that can be used in combination with another shape to remove any parts of the combined shape that doesn’t fall within the clipPath. That sounds slightly confusing, so we will break it down a bit to hopefully clarify the explanation.

Let’s imagine that we want to display the intersection of two shapes. What we will do is define our clipPath which will act as a ‘cookie cutter’ which can cut out the shape we want (we will choose an ellipse). Then we will draw our base shape (which is analogous to the dough) that we will use our cookie cutter on (our dough will be shaped as a rectangle). The intersection of the cookie cutter and the dough is our clipped path.

Our clipPath (cookie cutter) element is an ellipse;

clipPath (cookie cutter)

Our shape that we will be clipping (the dough) is a rectangle;

Rectangle element (dough)

The intersection of the two is the clipped path (shaded grey);

Combination of the ellipse and the rectangle

The graphic examples above are misleading in the sense that the two basic shapes are not actually displayed. All that results from the use of the clipPath is the region that is the intersection of the two.

The clipped path

The following is an example of the code section required to draw the clipped path in conjunction with the HTML file outlined at the start of this chapter. The clipPath element is given the ID ‘ellipse-clip’ and a specified size and location. Then when the rectangle is appended. the clipPath is specified as an attribute (via a URL) using clip-path.

// define the clipPath
holder.append("clipPath")       // define a clip path
    .attr("id", "ellipse-clip") // give the clipPath an ID
  .append("ellipse")          // shape it as an ellipse
    .attr("cx", 175)         // position the x-centre
    .attr("cy", 100)         // position the y-centre
    .attr("rx", 100)         // set the x radius
    .attr("ry", 50);         // set the y radius

// draw clipped path on the screen
holder.append("rect")        // attach a rectangle
    .attr("x", 125)        // position the left of the rectangle
    .attr("y", 75)         // position the top of the rectangle
    .attr("clip-path", "url(#ellipse-clip)") // clip the rectangle
    .style("fill", "lightgrey")   // fill the clipped path with grey
    .attr("height", 100)    // set the height
    .attr("width", 200);    // set the width

This will produce a path as follows;

The clipped path

An example of this in use can bee seen in the difference chart explanation later in the book.

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).