如何在D3.js中过滤南极光JSON数据，仅展示北极光投影？

要过滤掉南极光数据，核心是筛选纬度大于0的极光点——因为NOAA的Ovation极光数据中，coordinates数组的第二个元素是纬度，正数对应北半球（北极光），负数对应南半球（南极光）。

修改步骤 #

在将原始数据转为Feature对象之前，先对data.coordinates做过滤，只保留纬度>0的条目即可。

修改后的完整代码 #

d3.json('https://services.swpc.noaa.gov/json/ovation_aurora_latest.json').then(data => {

  // 关键修改：先过滤掉纬度<=0的南极光数据
  let filteredCoords = data.coordinates.filter(d => d[1] > 0);

  let ovation = filteredCoords.map(d => {    
    let aurora = d[2];  
    let projcoords = earth([d[0], d[1]]);
    let type = 'Point';
    let coordinates = [d[0], d[1]];
    let geometry = {type, coordinates};
    let properties = {aurora};
    return {
      'type': 'Feature',
      properties,
      projcoords,
      geometry
    };
  });

  var ergs = d3.sort([...new Set(filteredCoords.map(d => d[2]))]);

  var blender = ['#b1d8a3', '#b0dba2', '#afdfa1', '#aee2a0', '#ace69e', '#a8ea9b', '#a1ef94', '#96f489', '#85fa79', '#67ff61'];

  let aurora = svg.append('g');

  var color = d3.scaleQuantize([0, 10], blender);
  var radius = d3.scaleSqrt([0, d3.max(ovation, d => d.properties.aurora)],[0, 12]);

  aurora
    .selectAll('circle')
    .data(ovation)
    .join('circle')
    .attr('fill', d => color(d.properties.aurora))
    .attr('r', d => radius(d.properties.aurora))
    .style('opacity', 0.011)
    .attr('transform', d => 'translate(' + earth(d.geometry.coordinates) + ')');

});

说明 #

1. 新增filteredCoords变量，通过filter(d => d[1] > 0)筛掉南极光数据；
2. 后续的map、ergs计算都基于过滤后的数组，避免无效数据参与处理，提升性能；
3. 你原代码里注释掉的data.coordinates.filter(d => d[1] > 0)思路是对的，只是没实际应用到后续的数据处理流程中。

内容的提问来源于stack exchange，提问作者4500 X-RAY