D3 Geo: Getting Projection.clipangle To Work On All Specified Elements

I'm a newcomer to D3 and I'm trying to make a world globe with some points ('pins') on it. Demo here: http://bl.ocks.org/nltesown/66eee134d6fd3babb716 Quite commonly, the projectio

Solution 1:

It is not sufficient to just set the clipping radius via clipAngle() to get the desired behavior. The projection alone will not do the clipping, but just calculate the projected coordinates without taking into account any clipping. That is the reason, why Taiwan gets rendered, although you expected it to be hidden.

But, thanks to D3, salvation is near. You just need to re-think the way you are inserting your circles representing places. D3 has the mighty concept of geo path generators which will take care of the majority of the work needed. When fed a projection having a clipping angle set, the path generator will take this into account when calculating which features to actually render. In fact, you have already set up a proper path generator as your variable path. You are even correctly applying it for the globe, the land and the arcs.

The path generator will operate on GeoJSON data, so all you need to do is convert your places to valid GeoJSON features of type Point. This could be done with a little helper function similar to that used for the arcs:

functiongeoPlaces(places) {
  return places.map(function(d) {
    return {
      type: "Point",
      coordinates: [d.lng, d.lat]
    };
  });
} 

With only minor changes you are then able to bind these GeoJSON data objects to make them available for the path generator which in turn takes care of the clipping:

svg.selectAll(".pin") // Places
    .data(geoPlaces(places))
  .enter().append("path")
    .attr("class", "pin")
    .attr("d", path);

Have a look at my fork of your example for a working demo.