用D3绘制地图上的点

Question

我正在尝试使用基于纬度和经度的D3地理库将几个点绘制到地图上.但是,当我将这些值传递给我的投影函数时,它会产生我的SVG图像边界之外的坐标.我的代码基于文档中提供的此示例.

我已将当前代码抛出:http://bl.ocks.org/rpowelll/8312317

我的源数据是一个简单的对象数组,格式如此

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

在此之后我设置了一个PlateCarrée投影,如下所示:

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元素边界之外的点.有什么明显的我在这里做错了吗？

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
    ]) + ")";
  });