javascript - 给定经纬度，在 D3 地理投影上绘制点

Question

我正在学习一些关于 D3 的知识，我一直在研究的示例之一是地理投影(正交投影)。我意识到有很多关于与此非常相似的主题的问题，但没有一个能帮助我理解如何使用投影正确地绘制点(其中一些演示了翻译，但对我来说似乎不是一回事) .

代码如下:

var width = 960,
    height = 500;

var projection = d3.geo.orthographic()
    .scale(248)
    .clipAngle(90);

var path = d3.geo.path()
    .projection(projection);

var graticule = d3.geo.graticule()
    .extent([[-180, -90], [180 - .1, 90 - .1]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var line = svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("readme-world-110m.json", function(error, world) {
    var countries = topojson.feature(world, world.objects.countries).features;
        i = -1,
        n = countries.length;

    var country = svg.selectAll(".country")
      .data(countries)
      .enter().insert("path", ".graticule")
      .attr("class", "country")
      .attr("d", path);

    var allPoints = [];
    for (var lat = -90; lat < 90; lat=lat+10) {
      for (var lon = -180; lon < 180; lon=lon+10) {
          allPoints.push(projection([lat, lon]));
      }
    }

    var intersections = svg.selectAll('.gridpoints')
            .data(allPoints)
          .enter().append('circle', '.gridpoints')
            .attr('cy', d => d[0])
            .attr('cx', d => d[1])
            .attr('r', 5);
});

这个想法只是在所有经纬网交点上绘制一个圆圈。虽然投影和线条/国家/地区路径的呈现方式与我预期的一样(因为它们来自示例)，但我对要绘制的圆圈有些迷茫。结果如下:

如您所见，圆圈之间的位置似乎正确，但它们似乎逆时针旋转了约 -90 度，我不明白为什么。谁能告诉我我做错了什么？

Answer 1

简单的错误——投影采用 reverse order to what you've specified 中的参数:

Returns an array [x, y] given the input array [longitude, latitude].