d3.js TypeError null 不是和对象 Geojson



我正在尝试使用存储在数据库中的人口普查块坐标在 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]`
]]}
]}

我正在通过本地主机连接访问该文件;但是,我一直得到

TypeError: 'null' is not an object (evaluating 'json.features')

谁能告诉我这是否是 json 文件的问题? 对我来说,它看起来像有效的 json?

你的对象中有一些尾随反引号。它在括号上也不匹配。

一般:缩进它并检查错误。

查看数组,每个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>

最新更新