使用D3在地图上绘制点

Question

我正在尝试使用D3地理库根据纬度和经度在地图上绘制一些点。但是，当我将这些值传递到我的投影函数中时，它会导致坐标超出SVG图像的边界。我的代码基于文档中提供的示例。

我已经把当前代码放在这里。

我的源数据是一个简单的对象数组，格式如下：

var places = [
  {
    name: "Wollongong, Australia",
    location: {
      latitude: -34.42507,
      longitude: 150.89315
    }
  },
  {
    name: "Newcastle, Australia",
    location: {
      latitude: -32.92669,
      longitude: 151.77892
    }
  }
]

接下来，我像这样设置了一个等距平面投影：

var width = 960,
height = 480

var projection = d3.geo.equirectangular()
    .scale(153)
    .translate([width / 2, height / 2])
    .precision(.1);

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

接着，我使用与链接示例基本相同的代码来绘制地图。在我的脚本末尾，我使用下面的代码在这张地图上标记点：

svg.selectAll(".pin")
    .data(places)
  .enter().append("circle", ".pin")
    .attr("r", 5)
    .attr("transform", function(d) {
      return "translate(" + projection([
        d.location.latitude,
        d.location.longitude
      ]) + ")"
    })

然而，这段代码生成的点超出了SVG元素的边界。我在这里做错了什么明显的事情吗？

- rpowell

---

似乎你的投影比例/平移有误。这个问题可能会有所帮助。 - Lars Kotthoff

看起来投影本身没问题，因为实际的地图路径使用相同的投影方式，并且绘制时没有任何问题。 - rpowell

Answer 1

你的代码中有一个简单的拼写错误--在投影中应该传递坐标为(经度, 纬度)，而不是反过来。这段代码应该可以正常工作：

 svg.selectAll(".pin")
  .data(places)
  .enter().append("circle", ".pin")
  .attr("r", 5)
  .attr("transform", function(d) {
    return "translate(" + projection([
      d.location.longitude,
      d.location.latitude
    ]) + ")";
  });

- Lars Kotthoff

---

非常感谢！不过那似乎有些违反直觉。 - rpowell

@rpowell 这是有违直觉的，因为我们说“纬度和经度”，但我们把它们颠倒了——经度是x坐标，纬度是y坐标，而翻译期望其参数按顺序x、y传递。 - BallpointBen