Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active January 23, 2017 18:15
Show Gist options
  • Save mbostock/5b2a1d47ae020b9533c24129ada97ff0 to your computer and use it in GitHub Desktop.
Save mbostock/5b2a1d47ae020b9533c24129ada97ff0 to your computer and use it in GitHub Desktop.
Polygon Clipping I
license: gpl-3.0
height: 600

This example demonstrates how to use d3.geoIdentity to clip a polygon to an extent while rendering. You can save the resulting clipped polygon using d3.geoProject.

<!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>
var svg = d3.select("svg");
svg.append("rect")
.attr("fill", "blue")
.attr("x", 100)
.attr("y", 100)
.attr("width", 760)
.attr("height", 400);
d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
if (error) throw error;
var nation = topojson.feature(us, us.objects.nation);
svg.append("path")
.attr("fill", "red")
.attr("d", d3.geoPath()(nation));
svg.append("path")
.attr("fill", "black")
.attr("stroke", "white")
.attr("d", d3.geoPath(d3.geoIdentity().clipExtent([[100, 100], [860, 500]]))(nation));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment