2

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: enter image description here

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!

Community
  • 1
  • 1
leonard vertighel
  • 1,058
  • 1
  • 18
  • 37
  • 3
    If you want to use the rectangle to highlight something rather than show a geographic feature, it might be easier to draw it unprojected. – Lars Kotthoff Nov 12 '13 at 09:14

0 Answers0