D3.js coordonnées de mappage de données sur une carte topojson

Question

J'ai essayé de convertir les coordonnées en positions "cx" et "cy" sur ma carte svg que j'ai faite avec d3 et topojson. J'ai trouvé beaucoup de solutions en ligne mais je n'arrive pas à le faire fonctionner. J'essaie de convertir les coordonnées de latitude et de longitude données dans mon fichier json avec ma fonction de projection, mais il semble revenir à zéro pour tous les calculs.

mépris

//var geocoder = new google.maps.Geocoder(); 
//console.log(geocoder); 
//figure out how to fix 
//setIntervalAPI(alumni, geocoder, 1000); 
console.log("Test"); 

---

//size of canvas 
    var width = 960, 
    height = 500, 
    centered; 

    //projection of the svg 
    var projection = d3.geo.albersUsa() 
     .scale(1070) 
     .translate([width/2, height/2]); 

    //lines for projection 
    var path = d3.geo.path() 
     .projection(projection) 
     .pointRadius(1.5); 

    //scalable object svg 
    var svg = d3.select("#usa").append("svg") 
     .attr("width", width) 
     .attr("height", height); 

    //elements of the svgs 
    svg.append("rect") 
     .attr("class", "background") 
     .attr("width", width) 
     .attr("height", height) 
     .on("click", clicked); //for click to zoom function 

    //adds a group class for the svg 
    var g = svg.append("g"); 


    //queues json files to load 
    queue() 
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json") // Load US Counties 
    .defer(d3.json, "https://script.googleusercontent.com/macros/echo?user_content_key=K1E85EiRkGvkNnkwdiT6jmlX9xSU6hUvetLTNzpCcd_jSC2GpNbwZfr0KcbLfJdiHrUouVDeG7bCkVA0V_Fi5YMBTitaxVEdOJmA1Yb3SEsKFZqtv3DaNYcMrmhZHmUMWojr9NvTBuBLhyHCd5hHa1ZsYSbt7G4nMhEEDL32U4DxjO7V7yvmJPXJTBuCiTGh3rUPjpYM_V0PJJG7TIaKp1q6LyBxbset-sbB7gU77AXzTewdOjiNZcuPDH50tUN-GOHXQiXJz0ANQ8AP0ES9ozQJv8DXWa1hoIgY-huuTFg&lib=MbpKbbfePtAVndrs259dhPT7ROjQYJ8yx") 
    .await(ready); // Run 'ready' when JSONs are loaded 

    function ready(error, usa, alumni){ 
    if(error) throw error; 
    console.log(usa); 
    console.log(alumni.Form1); 

    //var geocoder = new google.maps.Geocoder(); 
    //console.log(geocoder); 
    //figure out how to fix 
    //setIntervalAPI(alumni, geocoder, 1000); 
    console.log("Test"); 


    g.append("g") 
     .attr("id", "states") 
    .selectAll("path") 
     .data(topojson.feature(usa, usa.objects.states).features) 
    .enter().append("path") 
     .attr("d", path) 
     .on("click", clicked); 

    g.append("path") 
     .datum(topojson.mesh(usa, usa.objects.states, function(a, b) { return a !== b; })) 
     .attr("id", "state-borders") 
     .attr("d", path); 

    /** appends circles to the map 
    NEEDS FIXED 
    */ 
    g.selectAll("circle") 
     .data(alumni.Form1).enter() 
     .append("circle") 
     .attr("cx", function(d) { return projection(d.lat)}) 
     .attr("cy", function(d) {//console.log(projection(d.lng)); 
     return projection(d.lng)}) 
     .attr("r", "8px") 
     .attr("fill", "blue"); 

---

Voici un exemple de ma structure de fichier JSON. J'ai sorti les informations personnelles par respect, mais le lng et le lat sont ce que je suis en train de convertir.

{ 
     "timestamp": "", 
     "name": "", 
     "location": "Austin, TX", 
     "current_company": "", 
     "current_position": "", 
     "company_logo": "", 
     "ta_start":, 
     "ta_role": "", 
     "favorite_memory": "", 
     "how_ta_helped": "Always have a side hustle. ", 
     "picture": "", 
     "personal_handles": "", 
     "linkedin": "", 
     "lng": 30.267153, 
     "lat": 97.7430607999999 
    } 

Answer 1

J'ai fini par trouver la solution à mon problème. Je compris que la variable

var projection = d3.geo().albersUsa() 
    .scale(1070) 
    .translate([width/2, height/2]); 

retourne null lorsque les coordonnées sont prévues en dehors des limites par rapport à la carte SVG. Je crois que la projection nécessite également une paire de coordonnées, pas seulement une seule coordonnée. Donc, je fini par changer

.attr("cx", function(d){ 
     return projection(d.lat) 
}) 

à

.attr("cx", function(d) { 
     var c = [d.lat, d.lng]; 
     var p = projection(c); 
     console.log(p); 
     return p[0] 
}) 

cela a fini fixer mon problème traçante. J'ai ensuite tchadé pour changer la façon dont j'ai ajouté les cercles à mon svg parce que ça a fini par être faux une fois le problème de coordonnées corrigé.

Voici la solution

g.selectAll("svg") 
     .data(alumni.Form1).enter().append("svg:circle") 
     .attr("cx", function(d) { 
     var c = [d.lat, d.lng]; 
     p = projection(c); 
     console.log(p); 
     return p[0] 
     }) 
     .attr("r", 2.5) 
     .attr("cy", function(d){ 
     var c = [d.lat, d.lng]; 
     p = projection(c); 
     return p[1] 
     }) 
     .style("fill", "blue"); 

fixe J'espère que cela a aidé quelqu'un avec un problème similaire