which is the most elegant way to draw a projected rectangle on a map using d3.js?
This solution is good for circles
var circ = d3.geo.circle();
var circle = g.selectAll("path1")
.data(dataset)
circle.enter()
.append("path")
.attr("class", "point")
.datum(function(d) {
return circ
.origin([d.x, d.y])
.angle(3)()
})
.attr("d", path)
as well explained in "Circle clip and projection with D3 orthographic"
Anyway, apparently there is not a d3.geo.rect()
, and I really cannot figure out which is the correct input that d3.geo.path()
wants to operate.
Let's take for example this set of coordinates:
var route = {
type: "LineString",
coordinates: [
[0,0],
[0,60],
[60,60],
[60,0],
]
}
svg.append("path")
.datum(route)
.attr("class", "route")
.attr("d", path);
which results in this projected rectangle:
You can see that the upper line is bended and do not follow the projection. It sounds coorect, as it follows a geodesic (parallels are defined differently from meridians), but then how can I define a a line following a parallel?
Thank you very much for your help!