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中的参数：

给定输入数组[经度，纬度]，返回数组[x，y]。

给定纬度和经度，绘制D3地理投影点

1 个答案: