如何使用D3在地图上绘制经纬度坐标?


16

我正在尝试在美国地图上覆盖任意组经纬度坐标的点。

到目前为止,我已经找到了D3制图示例,但是当我尝试将点放置在X,Y像素坐标上时,它们看起来似乎不在画布上。我确实找到了包括在d3中的坐标系在内的工作记录讲义,但是我仍然不确定如何在地图上显示经纬度坐标

到目前为止,这就是我所拥有的(几乎只有美国地图)

有关如何进行这项工作的建议将不胜感激!


d3是svg正确吗?
Mapperz

是的,d3是svg。
杰伊·泰勒

1
将svg渲染到地图的一个很好的例子在这里-github.com/kartograph/kartograph.py/wiki/…使用路径和度量
Mapperz

Answers:


15

您需要具有projection()函数,才能将点的纬度和经度投影到地图上。默认情况下,d3地理位置路径使用albersUsa投影,因此您可以明确声明它:

var projection = d3.geo.albersUsa();

您将在不使用AlbersUsa的示例中看到这一点,并且通过定义投影可以对其进行修改。对其进行定义使其可以作为功能使用。这样,您可以将点放置为svg圈子:

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

那应该在纽约附近地区绕一个圈。然后,您可以绑定具有“ lat”和“ long”作为属性的数据,在这种情况下,它看起来像这样:

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

投影函数采用[long,lat]数组并返回[x,y]数组,该数组非常适合transform,translate()语法,或者您可以将数组拆分为x和y值。

下面的示例放置多边形,线和点,并从csv中获取点并将其投影到地图上,但是请注意,它转换了g元素并在该元素上附加了一个圆(您可能还需要标签或其他方面到一个网站,所有这些都将附加到该预计的g元素上):

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.