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

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

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

到目前为止，这就是我所拥有的（几乎只有美国地图）

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

— 杰伊·泰勒（Jay Taylor）
source

d3是svg正确吗？

— Mapperz

是的，d3是svg。

— 杰伊·泰勒

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

— Mapperz

您需要具有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/

— 以利亚
source