正確的方式來解析這個JSON與D3

使用它

我使用隨機的用戶生成器來獲取JSON數據： http://randomuser.me/正確的方式來解析這個JSON與D3

我打個電話，每次我點擊一個按鈕，所以郵編我進去返回我使用它來在Google Maps API中執行地理編碼並獲取經緯度。直到它工作得很好，但我不知道如何在Google地圖上使用它。我試圖創建D3圈，有兩種方法可以做到這一點：

1.-從谷歌地圖API使用繪圖形狀： https://developers.google.com/maps/documentation/javascript/shapes#circles

2：從使用谷歌地圖API的自定義覆蓋： https://developers.google.com/maps/documentation/javascript/customoverlays

我需要疊加做出來，在這個例子中畫出的圖形與D3一樣： http://bl.ocks.org/mbostock/899711

所以我的疑惑是：

1.-如何使用D3來使用緯度和經度並加載它們？在這個例子中，他們從目錄加載JSON，但在這裏我使用的是遠程數據。我應該考慮一個JSON解析或字符串或其他？

2.什麼是正確的方式來寫這是一個乾淨的代碼？爲什麼？

預先感謝您

的index.html

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="css/style.css"/> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/d3.v3.js"></script> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?v&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() {   
     var mapOptions = { 
      center: new google.maps.LatLng(16.4706001, -33.6728973), 
      zoom:3, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions);  
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 

    <div id="map-canvas"></div> 

    <div id="button"> 
     <button id="loadbutton">Click to Load</button> 
    </div> 

    <script type="text/javascript" src="js/script.js"></script> 
    </body> 
</html>

的script.js

var randomuserURL = 'http://api.randomuser.me/'; 

var myButton = document.getElementById('loadbutton'); 
myButton.onclick = loadAJAX; 

var lat = ''; 
var lng = ''; 
var zipcode; 
var geocoder = new google.maps.Geocoder(); 

function loadAJAX() { 
    $.ajax({ 
     url: randomuserURL, 
     dataType: 'json', 
     success: function(data){ 
     zipcode = data.results[0].user.location.zip; 
     latlng(); 
     } 
    }); 
} 

function latlng() { 
    geocoder.geocode({ 'address': zipcode}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      lat = results[0].geometry.location.lat(); 
      lng = results[0].geometry.location.lng(); 
     } else { 
      alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    console.log('Latitude: ' + lat + ' Logitude: ' + lng); 
}

來源

2013-12-23 user3062745