Question

我是D3.js的新手，我正在尝试加载json文件。我已经按照教程使用以下代码：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
<title>D3 World Map</title>
<style>
  path {
    stroke: white;
    stroke-width: 0.5px;
    fill: black;
  }
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
         var width = 900;
         var height = 600;

  var projection = d3.geo.mercator();

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
  var path = d3.geo.path()
      .projection(projection);
  var g = svg.append("g");

  d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {
      g.selectAll("path")
       .data(topology.features)
      .enter()
        .append("path")
        .attr("d", path)
  });
</script>

我的json文件的结构如下：

{“type”：“Feature”，“properties”：{“REGION”：“Southern Region”，“REG_CODE”：“03”，“DIVISION”：“Cork West”，“DIV_CODE”：“0319” ，“DISTRICT”：“Bandon”，“DIST_CODE”：“4300A”，“SUB_DIST”：“Kinsale”，“SUB_IRISH”：“CionntsSáile”，“SUB_CODE”：“4305B”，“COUNTY_1”：“Cork”， “COUNTY_2”：null，“GEOGID”：“M4305B”，“Male2011”：5765，“Female2011”：5963，“Total2011”：11728，“PPOcc2011”：4054，“Unocc2011”：1177，“Vacant2011”：1013， “HS2011”：5231，“PCVac2011”：19.4，“CREATEDBY”：“Paul Creaner”}，“几何”：{“type”：“Polygon”，“coordinates”：[[[154039.34449999966,50090.991299999878]，[154039.8311， 50105.332900000736]，[154041.9757000003,50130.335699999705]

以及一长串坐标

然而，当我加载这个html文件时，我只是得到一个空白屏幕。我检查了控制台并且没有收到错误（我之前已经解决了这些问题）。

有人可以帮忙吗？非常感谢任何帮助。

谢谢。

Answer 1

首先，cojack's answer是答案的第一部分。

其次，你的geojson不使用WGS84，而是使用投影坐标空间。 D3需要WGS84或lat长对。因此，当D3尝试将其投影到SVG坐标空间时，这将产生错误。您必须重新投影geojson才能在d3中使用它。您需要知道当前数据用于重新投影的投影。

第三，一旦您能够无错误地投影，可以更改投影参数，以便您的地图居中并在数据上正确缩放。关于墨卡托投影

projection.scale(number).center([longitude,latitude]);

应足以正确缩放和居中地图。

我将geojson替换为另一个，并且在cojack的评论（plunker中基于plunker显示数据没有问题，花点时间加载geojson）。

Answer 2

首先，json数据是错误的。你的json的语法没有完成。然后，你不匹配参数顺序，错误是回调中的第一个，而不是数据。因此，当您更改它时，它可能会在您检测到时起作用。从：

d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {

要：

d3.json("Census2011_Garda_Subdisticts.json", function(error, topology) {

不要忘记检查错误是否存在并对它们作出反应。

问候。

D3.js - json文件无法加载

2 个答案: