我正在尝试使用存储在数据库中的人口普查区块坐标在d3.js中创建地图。 d3代码是:
<script type="text/javascript" src="./d3.v3.js"></script>
<script type="text/javascript">
var path = d3.geo.path();
d3.json("./flare3.json", function(json){
var canvas = d3.select("body").append("svg")
.attr("height", 1500)
.attr("width", 1500)
canvas.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});
</script>
flare3.json文件位于由本地apache服务器提供的文档目录中。该文件的一部分如下:
{"type":"FeatureCollection",
"features": [{"type":"Feature",
"id": "CB120730014023015",
"geometry": {
"type":"Polygon",
"coordinates": [[[-84.299332, 30.459799],[-84.299255, 30.45977],[-84.299156, 30.459772], `[-84.299026, 30.45977],[-84.299011, 30.459734],[-84.299019, 30.459677],[-84.299019, 30.45962],[-84.299026, 30.459557],[-84.299034, 30.459496],[-84.299072, 30.459459],[-84.29921, 30.459454],[-84.299332, 30.459499],[-84.299355, 30.459568],[-84.299339, 30.459692],[-84.299332, 30.459799]`
]]},{"type":"Feature",
"id": "CB120730013002001",
"geometry": {
"type":"Polygon",
"coordinates": [[[-84.296173, 30.444916],[-84.296196, 30.444923],[-84.296295, 30.44496], `[-84.296387, 30.445002],[-84.296501, 30.445047],[-84.296707, 30.445145],[-84.296867, 30.44523],[-84.296989, 30.445284],[-84.297203, 30.44533],[-84.297264, 30.445356],[-84.297531, 30.445488],[-84.297585, 30.44552],[-84.297699, 30.445578],[-84.297943, 30.445686],[-84.297966, 30.4457],[-84.298096, 30.445765],[-84.298103, 30.446115],[-84.297615, 30.445866],[-84.29657, 30.44536],[-84.296104, 30.44516],[-84.295967, 30.445108],[-84.295616, 30.444979],[-84.295135, 30.444845],[-84.294846, 30.444798],[-84.294304, 30.444721],[-84.294281, 30.444717],[-84.294014, 30.444696],[-84.293961, 30.444696],[-84.293968, 30.444389],[-84.294136, 30.444408],[-84.294266, 30.444426],[-84.294296, 30.444435],[-84.294487, 30.44449],[-84.294739, 30.444523],[-84.295181, 30.444609],[-84.295334, 30.444643],[-84.295647, 30.444731],[-84.295975, 30.444841],[-84.296173, 30.444916]`
]]}
]}
我通过localhost连接访问该文件;但是,我一直在
TypeError: 'null' is not an object (evaluating 'json.features')
有谁能告诉我这是否是json文件的问题?它对我来说看起来像是有效的json吗?
答案 0 :(得分:2)
你的对象中有一些尾随反引号。它也与括号不匹配。
一般情况下:缩进并查看错误。
查看数组中的每个geometry
对象都没有关闭。
将它简单地放入变量并使用控制台可能会有所帮助:
<!DOCTYPE html>
<head><title>Test obj</title></head>
<body>
<script type="text/javascript">
var x = {
"type": "FeatureCollection",
"features":
[
{
"type" : "Feature",
"id" : "CB120730014023015",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-84.299332, 30.459799],
[-84.299255, 30.45977],
[-84.299156, 30.459772], ` // <<- Bad tick
[-84.299026, 30.45977],
[-84.299011, 30.459734],
[-84.299019, 30.459677],
[-84.299019, 30.45962],
[-84.299026, 30.459557],
[-84.299034, 30.459496],
[-84.299072, 30.459459],
[-84.29921, 30.459454],
[-84.299332, 30.459499],
[-84.299355, 30.459568],
[-84.299339, 30.459692],
[-84.299332, 30.459799]` // <<- Bad tick
]
]
// <<- Missing }
},
{
"type": "Feature",
"id": "CB120730013002001",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-84.296173, 30.444916],
[-84.296196, 30.444923],
[-84.296295, 30.44496], ` // <<- Bad tick
[-84.296387, 30.445002],
[-84.296501, 30.445047],
[-84.296707, 30.445145],
[-84.296867, 30.44523],
[-84.296989, 30.445284],
[-84.297203, 30.44533],
[-84.297264, 30.445356],
[-84.297531, 30.445488],
[-84.297585, 30.44552],
[-84.297699, 30.445578],
[-84.297943, 30.445686],
[-84.297966, 30.4457],
[-84.298096, 30.445765],
[-84.298103, 30.446115],
[-84.297615, 30.445866],
[-84.29657, 30.44536],
[-84.296104, 30.44516],
[-84.295967, 30.445108],
[-84.295616, 30.444979],
[-84.295135, 30.444845],
[-84.294846, 30.444798],
[-84.294304, 30.444721],
[-84.294281, 30.444717],
[-84.294014, 30.444696],
[-84.293961, 30.444696],
[-84.293968, 30.444389],
[-84.294136, 30.444408],
[-84.294266, 30.444426],
[-84.294296, 30.444435],
[-84.294487, 30.44449],
[-84.294739, 30.444523],
[-84.295181, 30.444609],
[-84.295334, 30.444643],
[-84.295647, 30.444731],
[-84.295975, 30.444841],
[-84.296173, 30.444916]` // <<-Bad tick
]
]
}
// <-- Missing }
]
}
</script>
</body>
</html>