如何使用d3.js将纬度和经度转换为（x，y）坐标

Question

I am making my country's map using d3.js. I use the google maps url to extract the longitude and latitude values of some points. In order to show a point using d3, I need to convert it into an (x,y) value in pixels and store it in an array of cities. I know this issue is about projection but I couldn't manage to solve it.

This is part of my code.

var projection = d3.geoMercator().fitSize([width, height], json);
var path = d3.geoPath().projection(projection); 


var URL =  "https://www.google.com.tr/maps/place/Ankara/@39.9035553,32.6223376,11z/data=!3m1!4b1!4m5!3m4!1s0x14d347d520732db1:0xbdc57b0c0842b8d!8m2!3d39.9333635!4d32.8597419?hl=tr";

var splitUrl = URL.split('@');
var coords = splitUrl[1].split(',');

console.log(coords[0]); 
console.log(coords[1]); 

cities.push([coords[0], coords[1]]);

Answer 1

You don't need to convert your data to (x,y) pairs in pixels. When you use d3.geoPath.projection(projection) you've set your d3.geoPath() path generator to use the specified projection to automatically convert (latitude, longitude) pairs to (x,y) pairs.

What you need to do is take your (lat, long) pairs and use them to generate a GeoJSON object, which you can then feed to your d3.geoPath generator. You'll probably want a GeoJSON point .

So your code should probably look like:

var projection = d3.geoMercator().fitSize([width, height], json);
var pathGenerator = d3.geoPath(projection);

var URL =  "https://www.google.com.tr/maps/place/Ankara/@39.9035553,32.6223376,11z/data=!3m1!4b1!4m5!3m4!1s0x14d347d520732db1:0xbdc57b0c0842b8d!8m2!3d39.9333635!4d32.8597419?hl=tr";

var splitUrl = URL.split('@');
var coords = splitUrl[1].split(',');

var geoJsonPoint = {
    type: "Point",
    coordinates: coords,
} 

pathGenerator.path(geoJsonPoint);