使用 D3 在地图上绘制点

Posted 2023-03-23

【中文标题】使用 D3 在地图上绘制点

【英文标题】：Plotting points on a map with D3

【发布时间】：2014-01-26 01:47:16

【问题描述】：

我正在尝试使用基于纬度和经度的 D3 地理库在地图上绘制几个点。但是，当我将这些值传递给我的投影函数时，它会导致坐标超出我的 SVG 图像的范围。我的代码基于this example provided in the documentation。

我已将当前代码提交到：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
    
  
]

在此之后，我设置了一个 Plate Carré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 元素的边界。有什么明显的我做错了吗？

【问题讨论】：

听起来您的投影比例/平移已关闭。 This question 可能会有所帮助。

投影本身似乎还不错，因为实际的地图路径使用相同的投影并且绘制没有问题。

【参考方案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
    ]) + ")";
  );

【讨论】：

非常感谢！不过，这似乎有点违反直觉。

@rpowell 这是违反直觉的，因为我们说“纬度和经度”，但我们倒着说——经度是x坐标，纬度是y坐标，并且翻译期望它的参数按照 x, y 的顺序。