Question

问题：

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

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

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

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

我做错了什么？

CODE：

 <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>

Answer 1

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

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

.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

Answer 2

实际上几何是空的，你可以在json中看到它

JSON数据错误说数据为空时不是？

2 个答案: