D3使用d3.geo.albersUsa投影时城市点偏移、经纬度反转问题求助

你遇到的问题核心是城市点的经纬度没有经过投影转换，直接把原始地理坐标当做SVG画布坐标使用，修改方案如下：

需修改的核心点 #

• 坐标转换逻辑修正：你当前cx、cy直接返回原始经纬度值，没有用你定义的projection方法做坐标映射，修改为：

.attr("cx", function(d) {
  // projection接收[经度, 纬度]数组，返回对应画布的[x,y]坐标
  return projection([d.longitude, d.latitude])[0];
})
.attr("cy", function(d) {
  return projection([d.longitude, d.latitude])[1];
})

• 圆点尺寸调整：你当前半径的缩放系数* .05过小，根据你的数据范围调整为* 1.5到* 3之间即可，示例：

.attr("r", function(d) {
  return Math.sqrt(d.hotness_rank) * 2;
})

• 冗余代码清理：你在城市点csv的回调函数开头重复声明了var data;，会覆盖传入的csv数据，删除该行即可避免数据异常。

修改后的圆点绘制完整代码 #

// 标记我居住过的城市！
d3.csv("https://raw.githubusercontent.com/sjpozzuoli/Daves_Eagles/main/Data_Main/data_clusters_latlong_ready.csv", function(data) {
  data.forEach(function(d){
    // 从字符串创建数值
    d.demand_score = +d.demand_score;
    d.hotness_rank = +d.hotness_rank;
    d.hotness_rank_yy = +d.hotness_rank_yy;
    d.unique_viewers_per_property_yy =+ d.unique_viewers_per_property_yy;
    d.median_days_on_market_yy =+ d.median_days_on_market_yy ;
    d.median_listing_price_yy =+ d.median_listing_price_yy;
    d.mortgage_rate =+ d.mortgage_rate;
    d.supply_score =+ d.supply_score;
    d.date = new Date(d.date);
    d.latitude =+ d.latitude;
    d.longitude =+ d.longitude;
    d.class =+ d.class;
  });
  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
      return projection([d.longitude, d.latitude])[0];
    })
    .attr("cy", function(d) {
      return projection([d.longitude, d.latitude])[1];
    })
    .attr("r", function(d) {
      return Math.sqrt(d.hotness_rank) * 2;
    })
    .style("fill", "rgb(217,91,67)")    
    .style("opacity", 0.85) 
});

内容的提问来源于stack exchange，提问作者Lucy Green