我正在尝试使用基于纬度和经度的D3地理库在地图上绘制一些点。但是,当我将这些值传递到我的投影函数中时,它导致的坐标超出了我的SVG图像的范围。我的代码基于文档中提供的示例。
我将当前代码放在: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
}
}
]
之后,我像这样设置了一个PlateCarré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元素的范围。我在这里做错什么了吗?
您的代码中有一个简单的错字-坐标应作为(经度,纬度)传递给投影,而不是相反。此代码应该可以正常工作:
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
]) + ")";
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句