Question

我一直在尝试将坐标转换为＆＃34; cx＆＃34;和＆＃34; cy＆＃34;我用s3和topojson制作的svg地图上的位置。我在网上找到了很多解决方案，但似乎无法让它发挥作用。我试图用我的投影函数转换我的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]
})

这最终修复了我的绘图问题。然后我chad改变我将圈子附加到我的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");

我希望这能帮助有类似问题的人

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

1 个答案: