Question

我无法找到下面列出的代码有什么问题。它没有将values.json的值加载到变量statesau中。如果我document.write（JSON.stringify（statesau））我得{}

values.json的内容是

{
"values": {
    "New South Wales": 8,
    "Victoria": 6,
    "Queensland": 3,
    "South Australia": 7,
    "Western Australia": 4,
    "Tasmania": 6,
    "Northern Territory": 7
}
}

HTML代码在这里：

<!DOCTYPE html>
<html>
  <head>
    <title>Wave to GeoJSON</title>
    <script src="http://d3js.org/d3.v2.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
#states path {
  stroke: #fff;
}
    </style>
  </head>
  <body>
  <h1>Wave to GeoJSON</h1>
    <script type="text/javascript">
    var statesau={};
  $.getJSON('values.json', function(data) {
    statesau=data;
  });
  document.write(JSON.stringify(statesau));
var w = 960,
    h = 500;
var z = d3.scale.category10();
var fill = d3.scale.log()
    .domain(d3.extent(d3.values(statesau)))
    .range(["brown", "steelblue"]);
var projection = d3.geo.azimuthal()
    .origin([135, -26])
		.translate([250,180])
    .scale(700);
var path = d3.geo.path()
    .projection(projection);
var svg = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);
var states = svg.append("g")
    .attr("id", "states");
d3.json("au-states.json", function(collection) {
  states.selectAll("path")
      .data(collection.features)
    .enter().append("path")
			.attr("fill", function(d) {
         return fill(statesau[(d.properties["STATE_NAME"])]);
       })
      .attr("d", path);
});
</script>

  </body>
</html>

Answer 1

如果您拥有getJSON等异步功能，则需要重新构建代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Wave to GeoJSON</title>
    <script src="http://d3js.org/d3.v2.js" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
#states path {
  stroke: #fff;
}
    </style>
  </head>
  <body>
  <h1>Wave to GeoJSON</h1>
    <script type="text/javascript">
        var statesau={};
          $.getJSON('values.json', function(data) {
            statesau=data;
            restOfCode();
          });
          function restOfCode(){
                  document.write(JSON.stringify(statesau));
                var w = 960,
                    h = 500;
                var z = d3.scale.category10();
                var fill = d3.scale.log()
                    .domain(d3.extent(d3.values(statesau)))
                    .range(["brown", "steelblue"]);
                var projection = d3.geo.azimuthal()
                    .origin([135, -26])
                        .translate([250,180])
                    .scale(700);
                var path = d3.geo.path()
                    .projection(projection);
                var svg = d3.select("body").append("svg")
                    .attr("width", w)
                    .attr("height", h);
                var states = svg.append("g")
                    .attr("id", "states");
                d3.json("au-states.json", function(collection) {
                  states.selectAll("path")
                      .data(collection.features)
                    .enter().append("path")
                            .attr("fill", function(d) {
                         return fill(statesau[(d.properties["STATE_NAME"])]);
                       })
                      .attr("d", path);
                });
            }
        </script>

  </body>
</html>

Answer 2

主要问题是，正如他在评论中提到的webdeb，$.getJSON是一个异步函数。如果您希望document.write正常运行，则必须将其添加到回调中，如下所示：

$.getJSON('values.json', function(data) {
  statesau=data;
  document.write(JSON.stringify(statesau));
});

将JSON的值加载到JavaScript

2 个答案: