D3.js数据映射坐标到topojson映射

Question

我一直在尝试将坐标转换为我用d3和topojson制作的svg映射上的“ cx”和“ cy”位置。 我在网上找到了许多解决方案，但似乎无法使其正常工作。 我正在尝试使用投影函数转换json文件中给定的纬度和经度坐标，但对于每次计算似乎都返回null。

漠视

//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");

---

这是我的json文件结构的示例。 我出于尊重的目的取出了个人信息，但是lng和lat是我要转换的内容。

{
        "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

我最终找到了解决我问题的方法。 我发现

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

当提供的坐标相对于SVG地图超出范围时，变量将返回null。 我相信投影还需要一对坐标，而不仅仅是一个坐标。 所以我最终改变了

.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]
}) 

最终解决了我的绘图问题。 然后，我改变了将圆添加到svg的方式，因为一旦坐标问题解决，它最终就出错了。

这是固定的解决方案

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

我希望这对遇到类似问题的人有所帮助