D3.js-无法加载json文件
[英]D3.js - json file won't load
问题描述
I am new to D3.js and am trying to load a json file. 
我是D3.js的新手，正在尝试加载json文件。 I have followed a tutorial and am using the following code: 我已经按照教程进行操作，并且正在使用以下代码：
<!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>
The structure of my json file is as follows: 我的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": "Cionn tSá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" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 154039.34449999966, 50090.991299999878 ], [ 154039.8311, 50105.332900000736 ], [ 154041.9757000003, 50130.335699999705 ] {“ type”：“功能”，“ properties”：{“ REGION”：“南部地区”，“ REG_CODE”：“ 03”，“ DIVISION”：“软木塞西”，“ DIV_CODE”：“ 0319”，“ DISTRICT “：” Bandon“，” DIST_CODE“：” 4300A“，” SUB_DIST“：”金塞尔“，” SUB_IRISH“：” CionntSáile“，” SUB_CODE“：” 4305B“，” COUNTY_1“：”软木“，” 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”}，“ geometry”：{“ type”：“ Polygon”，“ coordinates”：[[[154039.34449999966，50090.991299999878]，[154039.8311，50105.332900000736]， [154041.9757000003，50130.335699999705]
and so on with a long list of coordinates 等等，还有一长串的座标
However when I load this html file, I am just getting a blank screen. 但是，当我加载这个html文件时，我只是得到一个空白屏幕。 I have checked the console and am not getting errors (I previously was and resolved these). 我已经检查了控制台，但没有收到错误（我以前是并解决了这些问题）。
Can anyone help? 有人可以帮忙吗？ Any help greatly appreciated. 任何帮助，不胜感激。
Thank you. 谢谢。
2 个解决方案
解决方案1
2 已采纳 2016-11-06 21:19:12
First, cojack's answer is the first part of the answer. 首先， cojack的答案是答案的第一部分。
Second, your geojson does not use WGS84, instead it uses a projected coordinate space. 其次，您的geojson不使用WGS84，而是使用投影的坐标空间。 D3 needs WGS84 or lat long pairs. D3需要WGS84或lat长对。 So this will produce errors when D3 tries to project it onto the SVG coordinate space. 因此，当D3尝试将其投影到SVG坐标空间时，将产生错误。 You'll have to reproject the geojson in order to use it in d3. 您必须重新投影geojson才能在d3中使用它。 You will need to know what projection the data uses currently in order to reproject it. 您将需要知道数据当前使用什么投影以进行重新投影。
Third, once you are able to project without errors, the projection parameters can be changed so that your map is centered and scaled properly over your data. 第三，一旦能够正确投影，就可以更改投影参数，以使地图居中并在数据上正确缩放。 On a Mercator projection 在墨卡托投影上
projection.scale(number).center([longitude,latitude]);
should be sufficient to properly scale and center a map. 应该足以正确缩放和居中地图。
I swapped the geojson for another, and had no issues with displaying data based on the plunker in cojack's comment ( plunker , takes a moment to load geojson). 我将geojson换成了另一个，并且在cojack的注释中显示基于plunker的数据没有问题（ plunker ，需要一点时间来加载geojson）。
解决方案2
1 2016-11-06 20:27:58
First of all, json data is wrong. 首先，json数据是错误的。 Syntax of your json is not completed. 您的json语法未完成。 Then, you mismatch arguments order, error is first in callback, not data. 然后，您不匹配参数顺序，错误首先出现在回调中，而不是数据中。 So when you will change it, it will might works as you exptected. 因此，当您更改它时，它可能会按预期工作。 From: 从：
d3.json("Census2011_Garda_Subdisticts.json", function(topology, error) {
To: 至：
d3.json("Census2011_Garda_Subdisticts.json", function(error, topology) {
Don't forget to check error if exists and react to them. 不要忘记检查错误是否存在并对它们做出反应。
Regards. 问候。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.