D3.js - Changes From Path.area In Version 2 To Version 4

I am trying to update d3-cartogram to work with D3.js version 4. So far, everything is going fine — I've just been updating all the functions so that they're written in the flatt

Solution 1:

As Mark suggests, you should use non-minified code for debugging. The relevant non-minified code from path/index.js looks like this:

path.area = function(object) {
  stream(object, projectionStream(pathArea));
  return pathArea.result();
};

Your error says that projectionStream is not a function; it’s probably undefined. The projection stream is set by path.projection, and as the documentation says, the projection you specify must implement projection.stream. (This error is not enforced greedily when you set the projection. It is lazily thrown when you try to use the path.)

The problem here is that D3 3.x’s path.projection supported the concept of a “fallback projection”, which was just a bare function taking a longitude-latitude array as input, and returning an x-y array as output. D3 3.x would implicitly wrap this in a default projection object to add features like adaptive sampling and antimedirian cutting. D3 4.0 removed this feature, forcing you to be explicit: you must implement the projection.stream to use d3.geoPath.

Per CHANGES:

“Fallback projections”—when you pass a function rather than a projection to path.projection—are no longer supported. For geographic projections, use d3.geoProjection or d3.geoProjectionMutator to define a custom projection. For arbitrary geometry transformations, implement the stream interface; see also d3.geoTransform.

Whenever you ask for help, I recommend linking to a live example that demonstrates your issue, since a small snippet of code and description is often insufficient to isolate the problem. Here it’s unclear what projection you are trying to use with d3.geoPath. For planar transformations, you most likely want to be use d3.geoTransform or d3.geoIdentity. For spherical-to-planar projections, you’ll want to use d3.geoProjection or d3.geoProjectionMutator.