我正在尝试使用基于纬度和经度的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 ]) + ")"; });