D3.js地圖上的緯度/經度位置

Question

我有這段代碼，它基本上創建了一個D3.js地圖，並在有人根據他們的IP位置「點擊」該頁面時創建了一個「圈子」，這最初是在拉斐爾，我試圖只使用D3.js庫，但我堅持就如何將直接「圓圈」在地圖上用正確的座標： -

function ZmgcClient() { 
    var personPath = "M255.968,166.154c34.206,0,61.936-27.727,61.936-61.934c0-34.208-27.729-61.936-61.936-61.936s-61.936,27.728-61.936,61.936 C194.032,138.428,221.762,166.154,255.968,166.154z M339.435,194.188c-13.082-13.088-28.625-20.924-84.83-20.924 c-56.214,0-71.38,8.505-83.796,20.924c-12.422,12.416-8.23,144.883-8.23,144.883l27.485-65.304l17.28,194.554l49.856-99.57 l46.521,99.57l16.456-194.554l27.487,65.304C347.664,339.07,352.521,207.271,339.435,194.188z"; 
    if (! (this instanceof arguments.callee)) { 
     return new arguments.callee(arguments); 
    } 
    var self = this, 
    width = $('#map').width(), 
     mapCanvasHeight = (width * 0.45); 

    this.init = function() { 
     self.drawMap(); 
     self.setupBayeuxHandlers(); 
    }; 

    this.setupBayeuxHandlers = function() { 
     $.getJSON("/config.json", function (config) { 
      self.client = new Faye.Client("http://" + window.location.hostname + ':' + config.port + '/faye', { 
       timeout: 120 
      }); 

      self.client.subscribe('/stat', function (message) { 
       // console.log("MESSAGE", message); 
       self.drawMarker(message); 
      }); 
     }); 
    }; 

    this.drawMap = function() { 
     var data; 
     // Most parts of D3 don't know anything about SVG—only DOM. 
     self.map = d3.geo.equirectangular().scale(width); 
     self.path = d3.geo.path().projection(self.map); 
     self.svg = d3.select('#map').append('svg:svg') 
      .attr("width", "100%") 
      .attr("height", "100%") 
      .attr("viewBox", "0 0 " + width + " " + mapCanvasHeight); 

     self.countries = self.svg.append('svg:g').attr('id', 'countries'); 
     // Load data from .json file 
     d3.json("/ui/data/world-countries.json", function(json) { 
      self.countries.selectAll("path") // select all the current path nodes 
      .data(json.features)    // bind these to the features array in json 
      .enter().append("path")    // if not enough elements create a new path 
      .attr("d", self.path)    // transform the supplied jason geo path to svg 
      .on("mouseover", function(d) { 
       d3.select(this).style("fill","#6C0") 
        .append("svg:title") 
        .text(d.properties.name);}) 
      .on("mouseout", function(d) { 
       d3.select(this).style("fill","#000000");}) 
     }); 
    } 

    this.geoCoordsToMapCoords = function (latitude, longitude) { 
     latitude = parseFloat(latitude); 
     longitude = parseFloat(longitude); 

     var mapWidth = width, 
      mapHeight = mapCanvasHeight, 
      x, y, mapOffsetX, mapOffsetY; 

     x = (mapWidth * (180 + longitude)/360) % mapWidth; 

     latitude = latitude * Math.PI/180; 
     y = Math.log(Math.tan((latitude/2) + (Math.PI/4))); 
     y = (mapHeight/2) - (mapWidth * y/(2 * Math.PI)); 

     mapOffsetX = mapWidth * 0.026; 
     mapOffsetY = mapHeight * 0.141; 

     return { 
      x: (x - mapOffsetX) * 0.97, 
      y: (y + mapOffsetY + 15), 
      xRaw: x, 
      yRaw: y 
     }; 
    } 

    this.drawMarker = function (message) { 
     var lon = message.longitude, 
      lat = message.latitude, 
      city = message.city; 

     self.countries.append('svg:circle') 
      .attr("cy", lon, lat) 
      .attr("cx", lon, lat) 
      .attr('r', 5); 
    } 
    // Initialise 
    this.init(); 
}; 

var ZmgcClient; 

jQuery(function() { 
    ZmgcClient = new ZmgcClient(); 
}); 

我試圖通過lon/lat數據並在地圖上的那一點繪製一個圓圈，此代碼：

this.drawMarker = function (message) { 
    var latitude = message.latitude, 
     longitude = message.longitude, 
     text = message.title, 
     city = message.city, 
     x, y; 

    var mapCoords = this.geoCoordsToMapCoords(latitude, longitude); 
     x = mapCoords.x; 
     y = mapCoords.y; 

    console.log(x,y); 
    self.countries.append('svg:circle') 
     .attr("r", 40.5) 
     .attr("cx", longitude) 
     .attr("cy", latitude); 
     console.log(latitude, longitude); 

圓圈已創建，但位置不正確。

我錯過了什麼？

任何意見大加讚賞。

Answer 1

它必須已經晚了，應該是

var mapCoords = this.geoCoordsToMapCoords(latitude, longitude); 
     x = mapCoords.x; 
     y = mapCoords.y; 

    self.countries.append('svg:circle') 
     .attr("r", 5) 
     .style("fill", "steelblue") 
     .attr("cx", x) 
     .attr("cy", y); 

，而不是緯度，經度值。