Polygon Clipping III

If your clip polygon is more complicated than an axis-aligned rectangle, projection.clipExtent as shown previously won’t be sufficient. This example implements Sutherland–Hodgman clipping, which works for any convex clip polygon. Note, however, that this implementation only clips exterior polygon rings; you’ll need to do some additional work to handle any holes.

<!DOCTYPE html>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="d3-polygon-clip.js"></script>
<script>

var clip = [[100, 400], [480, 550], [860, 400], [860, 100], [480, 50], [100, 100]];

var svg = d3.select("svg");

svg.append("path")
    .attr("fill", "blue")
    .attr("d", "M" + clip.join("L") + "Z");

d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
  if (error) throw error;

var nation = topojson.feature(us, us.objects.nation),
      rings = nation.features[0].geometry.coordinates.map(function(rings) { return rings[0]; });

svg.append("g")
      .attr("fill", "red")
    .selectAll("path")
    .data(rings)
    .enter().append("path")
      .attr("d", function(d) { return "M" + d.join("L"); })

svg.append("g")
      .attr("fill", "black")
      .attr("stroke", "white")
    .selectAll("path")
    .data(rings)
    .enter().append("path")
      .attr("d", function(d) { return "M" + d3.polygonClip(clip, d).join("L"); })
});

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js