使用D3.js geoMercator投影绘制地图经纬度点失败，求解决方案

核心问题分析 #

• 重复修改投影参数：绘制圆形的cx/cy回调中，你重复执行projection.scale(s).translate(t)([d.lon, d.lat])，这会反复覆盖全局投影的配置，导致坐标计算逻辑混乱。实际上你已经在前期完成了投影的缩放和平移配置，无需每次计算坐标时重新设置。
• 选择器与类名不匹配：你用selectAll('.hospital-circle')选择元素，但给圆形设置的class是boundary，虽然这不是当前无法绘制的主因，但会影响后续元素的选中与更新，建议统一。

修正后的代码 #

1. 投影配置部分（保留原有逻辑） #

projection.scale(1).translate([0, 0]);
var b = path.bounds(data);
var s = .95 / Math.max((b[1][0] - b[0][0]) / mwidth, (b[1][1] - b[0][1]) / mheight);
var t = [(mwidth - s * (b[1][0] + b[0][0])) / 2, (mheight - s * (b[1][1] + b[0][1])) / 2 + 50];
projection.scale(s).translate(t); 

2. 绘制圆形的修正代码 #

// Hospital points
svg.selectAll('.hospital-circle')
   .data(hospitals)
   .enter()
   .append('circle')
   .attr('class', 'hospital-circle') // 统一类名与选择器
   .attr('r', 5)
   .attr('cx', function(d) {
         // 直接调用已配置好的全局投影
         var hospitalCoords = projection([d.lon, d.lat]);
         console.log(d, hospitalCoords);
         return hospitalCoords[0];
   })
   .attr('cy', function(d) {
         var hospitalCoords = projection([d.lon, d.lat]);
         console.log(d, hospitalCoords);
         return hospitalCoords[1];
   });

额外验证建议 #

• 检查hospitals数组数据：确保每个对象的lon（经度）、lat（纬度）是数值类型，且在合理地理范围内（经度-180_{180，纬度-90}90）。
• 查看控制台输出：如果hospitalCoords为null，说明经纬度格式错误；如果是异常极值，可能是地图边界数据data有问题，导致缩放比例s计算异常。

内容的提问来源于stack exchange，提问作者Daniel Panesso