Javascript d3投影几何编码器返回无

我试图用D3V4在图像上绘制一些坐标。当我试图将坐标传递给投影函数时，它会返回一些数据点的NAN。我从javascript中得到了一些帮助，它遵循以下纬度和经度约定，但不确定它到底是如何工作的

这是我的数据格式：

{coordinates: [60, 84],coordinates: [204, 92.4],coordinates: [117, 132.72]}

D3代码：

var el = d3.select('.js-map'),
  // 150 DPI image
  width = 300,
  // 150 DPI image
  height = 300;
  var thisObj = this;
var projection = d3.geoMercator()
  .scale(1)
  .translate([0, 0])
console.log('projection', projection);
var path = d3.geoPath()
  .projection(projection);

var map = el.append('svg')
  .attr('width', width)
  .attr('height', height);

map.append('image')
  .attr('xlink:href', this.floorMaps[0])
  .attr('width', width)
  .attr('height', height);

this.floorSensorInfo.forEach((data, index) => {
  var lonlat = projection(data.coordinates);

  console.log('Longitude Latitude', lonlat);

我可以看到我的数据输出，比如

[2.0420352248333655，NaN]

，但不确定到底发生了什么

此外，如果有人能解释一下我真的不理解的第一个链接，那将非常有帮助

Exported bounds of raster image
rasterBounds = [[-122.7895, 45.4394], [-122.5015, 45.6039]]

更新：

var el = d3.select('.js-map'),
  // 150 DPI image
  width = 300,
  // 150 DPI image
  height = 300;
  var thisObj = this;
var projection = d3.geoMercator()
  .scale(1)
  .translate([0, 0])
console.log('projection', projection);
var path = d3.geoPath()
  .projection(projection);

var map = el.append('svg')
  .attr('width', width)
  .attr('height', height);

map.append('image')
  .attr('xlink:href', this.floorMaps[0])
  .attr('width', width)
  .attr('height', height);

this.floorSensorInfo.forEach((data, index) => {
  var lonlat = projection(data.coordinates);

  console.log('Longitude Latitude', lonlat);

@安德鲁建议绘制法向坐标，因为纬度和经度只适用于世界地图。所以我现在粘贴了我下面的工作代码版本，它现在正在图像上绘制点

  var svg = d3.select("body")
    .append("svg")
    .attr("width",960) 
    .attr("height",500) 

  // image width and height in pixels, we don't want to skew this or scale this (then image units aren't straight pixels)
  var imageWidth = 300;
  var imageHeight = 168;
     var color_hash = {  0 : ["apple", "green"],
              1 : ["mango", "orange"],
              2 : ["cherry", "red"]
            } 

  function scale(coords) {
    return [coords[0] * imageWidth / 100, coords[1] * imageHeight / 100];
  }


  svg.append("image")
       .attr("width",imageWidth)  
       .attr("height",imageHeight)
       .attr("x", 0) // could be non-zero, but we would have to shift each circle that many pixels.
       .attr("y", 0)     
     .attr("xlink:href", this.floorMaps[0])


  var data = this.floorSensorInfo

          // var dataNest = d3.nest()
          // .key(function (d) { return d['sensor_name']; })
          // .entries(data)
    data.forEach(function (d, i) {
   svg.selectAll("circle")
    .data(data)
    .enter()

    .append("circle")
    .attr("cx", function(d) { return (d.value)[0]; })
      .attr("cy", function(d) { return (d.value)[1]; })
    .attr("r", 5)
   .style("fill", function(d) { 
         var color = color_hash[data.indexOf(d)][1]
         return color;
      })
         svg.append('text')

            .attr("x", 20+(i)*100)  // space legend
             .attr("y", imageHeight+20)  
                  // style the legend

       .style("stroke", function () { // Add the colours dynamically
                  return d['color'] = color_hash[data.indexOf(d)][1];
              })
        //.attr("dy", ".35em")
        .text( d.sensor_name);
//.text("jjjjjjj")
      })}

---

你使用的是无效的纬度-有两个值超过90:92.4132.72，但我只有这样的坐标。我从一个REST响应中得到一个图像，并根据图像大小的百分比值计算cordinates（x，y）值。所以假设图像是300*300，那么其中50%将是{150150}，这将是我绘图的坐标。所以我会有这样的价值观，我能找到一些解决办法吗？我知道这听起来很奇怪，但如果你在投影之前缩放纬度和经度，那么这就是我需要做的@andrewiid如果你正在扭曲特征（改变它们的形状、面积、长度和/或地图方向等）。不管你怎么做，你都不能给d3投影提供超过90度的纬度-这项工作围绕着世界各地的坐标-这不会产生想要的效果。但是，听起来像是在询问如何缩放和转换投影输出以匹配图像。如果是这样，你需要描述图像（它是整个世界吗？它是什么投影？它的范围是什么？）不，它不是整个世界。这是一个商店的平面图，坐标是传感器的位置，所以我们需要在这些点绘制彩色圆圈。据我所知，我们需要通过我上面解释的百分比法从图像分辨率中确定坐标。经度呢？它的范围是多少？还有纬度范围吗@Andreweid则不需要d3投影。它们采用球坐标（三维球体上由经度和纬度表示的点）并将其投影到二维平面。不是你需要的。相反，您需要平移和/或缩放x、y值。为此，您应该能够在此坐标系中提供图像的x、y值范围，并以像素为单位指示图像的大小（我理解为300x300）。我会更新问题，以反映问题的现状（否则问题将隐藏在评论中）