JSON数据错误说数据不是空的？答案

【问题标题】：JSON data error says data is null when it's not?JSON数据错误说数据不是空的？
【发布时间】：2017-04-30 10:38:04
【问题描述】：

问题：

我目前正在尝试在 D3 的地图上绘制陨石着陆数据。

我收到以下错误：未捕获的类型错误：

Cannot read property 'coordinates' of null index.html 89

我相信我获取 JSON 数据的方式是正确的，并且我使用 console.log 检查了 d.geometry 确实不为空。

我做错了什么？

代码：

 <script>

        // Map: https://codepen.io/manishgolcha/post/world-map-using-d3-js

        var jMap = $(".map"),
            height = jMap.height(),
            width = jMap.width(),
            mapJsonUrl = 'https://ucarecdn.com/8e1027ea-dafd-4d6c-bf1e-698d305d4760/world110m2.json',
           svg = d3.select(".map").append("svg")
            .attr("width", width)
            .attr("height", height);

        var getProjection = function() {
         var scale = 1,
             offset = [ width / 2, height / 2 ],
             projection = d3.geoEquirectangular().scale( scale ).rotate( [0,0] ).center([0,5]).translate( offset ),
             bounds = mercatorBounds( projection ),
             scaleExtent;

            scale = width / (bounds[ 1 ][ 0 ] - bounds[ 0 ][ 0 ]);
            scaleExtent = [ scale, 10 * scale ];

            projection
              .scale( scaleExtent[ 0 ] );

          return projection;
        },

        mercatorBounds = function(projection) {
          var maxlat = 83,
              yaw = projection.rotate()[ 0 ],
              xymax = projection( [ -yaw + 180 - 1e-6, -maxlat ] ),
              xymin = projection( [ -yaw - 180 + 1e-6, maxlat ] );

           return [ xymin, xymax ];
        };


        d3.json(mapJsonUrl, function (error, worldJson) {
            if (error) throw error;

          var projection = getProjection(),
              path = d3.geoPath().projection( projection );

          svg.selectAll( 'path.land' )
              .data( topojson.feature( worldJson, worldJson.objects.countries ).features )
              .enter().append( 'path' )
              .attr( 'class', 'land' )
              .attr( 'd', path );

            d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function(data) {

                const geoData = data.features;

                console.log(data.features[0].geometry);

                svg.selectAll("circle")
                  .data(geoData)
                  .enter()
                  .append("circle")
                  .attr("cx", (d) => projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[0])
                  .attr("cy", (d) => projection([d.geometry.coordinates[0], d.geometry.coordinates[1]])[1])
                  .attr("r", d.properties.mass)
                  .style("fill", "orange")
                  .style("opacity", 0.8);
            });
        });

    </script>

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

我不会重构您的代码（它还有一些其他问题），而只会解释与您的问题直接相关的问题：

首先，geometries 有很多 null 值。因此，您必须先检查它们：

.attr("cx", (d) => {
    if (d.geometry) return projection([d.geometry.coordinates[0],
        d.geometry.coordinates[1]
    ])[0]
})

除此之外，您没有圆圈的刻度。你不能这样做：

.attr("r", d.properties.mass)

除非您想要一个半径为数千像素的圆。因此，我使用scale.Sqrt 创建了一个：

var meteorScale = d3.scaleSqrt()
    .domain([0, d3.max(geoData, d=>+d.properties.mass)])
    .range([0, 30]);

这是您更新后的 CodePen：https://codepen.io/anon/pen/EmmgOK?editors=1000

【讨论】：

【解决方案2】：

Geometry 实际上是 null，你可以在 json 中看到它

【讨论】：