D3.js geo-projection projects the entire Earth

Community Help
1

I have just used D3.js geo-projection to create a country map. However, the projection seems to project the country and the entire earth. From the image below, we can see a clear boundary, which indicates (-180, -90) → (180, 90) (latitude and longitude).

image
image1293×678 11.3 KB

I just wrote the simplest code for the d3.js map:

const projection = d3.geoEquirectangular();
projection.fitSize([width, height], data);
const path = d3.geoPath().projection(projection);

I am sure my .geojson file only contains the multi polygon w.r.t a single country. The points do not exceed the country, i.e., I do not have a point at (180, 90).

I don’t know why d3.js added the entire earth boundary for me. I just want the single country to fit the SVG size.

I use the same code for a province, which correctly fits the SVG without a boundary.

2

See Geo: Rewind / Fil | Observable for a possible explanation.

1 Like
3

Thanks! I used the following code, and it works!

data.features[0] = rewind(data.features[0], true);
const path = d3.geoPath(rewind(projection, true));

The two lines should be used together.

image
image2392×1205 184 KB