我正在尝试使用基于纬度和经度的 D3 地理库在地图上绘制一些点。但是,当我将这些值传递到投影函数时,它会导致坐标超出 SVG 图像的范围。我的代码基于文档中提供了这个示例 http://bl.ocks.org/mbostock/3757119.
我已将当前代码放在:http://bl.ocks.org/rpowelll/8312317 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 元素的边界。我在这里做错了什么明显的事情吗?