用D3绘制地图上的点 [英] Plotting points on a map with D3

问题描述

我试图使用基于纬度和经度的D3地理图库绘制几个点到地图上。然而，当我把这些值传递到我的投影函数，它产生的坐标，我们的外面的我的SVG图像的边界。我的代码基于文档中提供的示例。

I'm trying to plot a few points onto a map using the D3 geo library based on latitudes and longitudes. However, when I pass these values into my projection function, it results in coordinates that our outside the bounds of my SVG image. My code is based on this example provided in the documentation.

我把当前的代码放在了： http://bl.ocks.org / rpowelll / 8312317

I've thrown the current code up at: http://bl.ocks.org/rpowelll/8312317

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

My source data is a simple array of objects formatted like so

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

我设置了一个PlateCarrée投影：

Following this I set up an Plate Carrée projection like so:

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)

b $ b

从那里我绘制地图与代码有效地相同的链接示例。在我的脚本结束时，我使用以下代码在此地图上绘制点：

From there I draw the map with code effectively identical to the linked example. At the end of my script, I use the following code to plot points on this map:

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

However this code results in points that are outside of the SVG element's bounds. Is there anything obvious I'm doing wrong here?

推荐答案

在你的代码中有一个简单的拼写错误 - 作为（经度，纬度）到投影，而不是相反。此代码应该很好：

You have a simple typo in your code -- coordinates should be passed as (longitude, latitude) to the projection, not the other way round. This code should work fine:

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

这篇关于用D3绘制地图上的点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！