D3.js Rectangle Feature Plotted As Arc In Mollweide Projection

I am trying to plot a rectangle using d3.js under the Mollweide projection. However, when I run the following script the rectangle appears as an arc or curved rectangle. I find the

Solution 1:

D3 paths follow great arcs, the shortest distance between two points. These two points are in three dimensional space on an ellipsoid, so the shortest path between them may not correspond to the shortest path between them measured in a projected 2 dimensional space.

Taking an extreme example, imagine a point at 85°N, 90°W, another at 85° N, 90 °E. Despite being on the same parallel, the shortest distance between the two is a short jaunt over the north pole. D3 would draw this line as two vertical lines to the top of the map (on a stereotypical equirectangular map: equator in the middle, north at the top) rather than a horizontal line along the 85th parallel.

If you wish to have visibly straight lines between two points on a projected plane, project the vertices onto the projected plane (svg coordinate space), and draw a line connecting these projected points. This could be done by creating a new geojson where every lat,long pair of the original geojson has been projected (projection([x,y])) and then drawn with a null projection: .attr(d, d3.geoPath(null))