How to load geoClipPolygon

Community Help
1

Hello Everyone,

I’m learning about rendering maps in d3js. Right now I am trying to clip paths rendered from geojson objects to within a polygon.

I have mostly been following the Mike Bostock’s example here, and Fil’s example here.

However, using d3js v7.4.4, when I call d3.geoClipPolygon I am given a type error and told that d3.geoClipPolygon is not a function (nor is it defined generally).

Has d3.geoClipPolygon been deprecated?

Happy to supply more code in a separate question for debugging, but I want to make sure this wasn’t the issue first.

2

advanced map projections are available in two optional modules, d3-geo-projection and d3-geo-polygon.

You can require them with d3, in a web page:

<script src="https://unpkg.com/d3@7"></script>
<script src="https://unpkg.com/d3-geo-projection@4"></script>
<script src="https://unpkg.com/d3-geo-polygon@1"></script>

or in Observable:

d3 = require("d3@7", "d3-geo-projection@4", "d3-geo-polygon@1.8")
2 Likes
3

Great, thank you!

Just curious, why is this considered an “advanced map projection”? I’m not really using any custom or special projections, just trying to clip using a shape (polygon) besides a circle/rectangle.

(Apologies, I guess a question like this should be under the beginner’s forum.)

4

The basic projections included in D3 are listed in GitHub - d3/d3-geo: Geographic projections, spherical shapes and spherical trigonometry. ; all the others (which I called “advanced” for no good reason) are in separate modules that you have to include separately.

d3-geo-polygon is not meant to clip projected shapes on the plane, but to clip map projections.

For planar shape clipping I would recommend GitHub - mfogel/polygon-clipping: Apply boolean polygon clipping operations (union, intersection, difference, xor) to your Polygons & MultiPolygons. (see Clipping? · Issue #4 · d3/d3-polygon · GitHub for the general discussion, and Hello, polygon-clipping / Fil / Observable for an example).

1 Like