给定纬度和经度，在 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中的参数：

根据输入数组 [longitude, latitude] 返回一个数组 [x, y]。