我正在尝试使用基于纬度和经度的D3地理库绘制几个点到地图上.然而,当我将这些值传递到我的投影函数中时,它会导致我们的SVG图像边界之外的坐标.我的代码是基于
this example provided in the documentation.
我把当前的代码放在了:http://bl.ocks.org/rpowelll/8312317
我的源数据是像这样格式的简单的对象数组
var places = [ { name: "Wollongong,Australia",location: { latitude: -34.42507,longitude: 150.89315 } },{ name: "Newcastle,location: { latitude: -32.92669,longitude: 151.77892 } } ]
在此之后,我设置了一个像这样的板卡雷投影:
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 ]) + ")"; });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。