解析此 JSON 并将其与 D3 一起使用的正确方法答案

【问题标题】：Correct way to parse this JSON and use it with D3解析此 JSON 并将其与 D3 一起使用的正确方法
【发布时间】：2013-12-23 22:28:45
【问题描述】：

我正在使用随机用户生成器来获取 JSON 数据： http://randomuser.me/

我每次点击一个按钮时都会打电话，所以我得到的邮政编码作为回报，我用它在谷歌地图 API 中进行地理编码并获取纬度和经度。在那之前它工作得很好，但我不知道如何在谷歌地图上使用它。我正在尝试创建 D3 圈子，有两种方法可以做到这一点：

1.- 使用来自 Google Maps API 的绘图形状： https://developers.google.com/maps/documentation/javascript/shapes#circles

2.- 使用来自 Google Maps 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);
}

【问题讨论】：

标签： javascript json google-maps-api-3 d3.js overlay

【解决方案1】：

你基本上拥有你需要的一切。

无需加载“本地”文件——d3.json 会将任何 URL 作为其第一个参数。您可能遇到的唯一问题是浏览器安全限制。在这种情况下，JSONP 可能会有所帮助。
如果您的代码适合您，那应该没问题。老实说，你的代码太少了，这真的无关紧要。

【讨论】：