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) { 
     var c = [d.lat, d.lng]; 
     var p = projection(c); 
     console.log(p); 
     return p[0] 
}) 

に

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

を変えてしまいました。私はその後、私は自分のビデオにサークルを追加する方法を変更することがうまくいきました。ここで

は固定された解決策は、私は、これは同様の問題

で誰かを助け願ってい

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

です