Question

我正在尝试在Link之后使用d3 v4在图像上绘制一些坐标。当我试图将坐标传递给投影函数时，它会为某些数据点返回NAN。我从here获得了一些帮助，说明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]]

更新：

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

  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")
      })}

Answer 1

 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")
      })}
javascript d3.js

d3投影geoMercator不返回任何内容

1 个答案: