javascript – 用D3在地图上绘制点数

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

javascript – 用D3在地图上绘制点数

解决方法

猜你在找的JavaScript相关文章