D3.js旧金山地图绘点仅显示在左上角问题求助

看起来你遇到的核心问题大概率是经纬度的输入顺序错误，再结合投影计算的细节，我们一步步来修复：

1. 先揪出最可能的元凶：经纬度顺序搞反了 #

D3的地理投影函数（比如projection()）要求传入的坐标格式是**[经度, 纬度]**，也就是先写经度（-122.x这类值），再写纬度（37.x这类值）。

但你的点位绘制代码里，直接把d.X和d.Y分别传给了projection()：

.attr("cx", function (d) { return projection(d.X); })
.attr("cy", function (d) { return projection(d.Y); })

这相当于把单个数值传给了需要数组的投影函数，而且大概率你的d.X是纬度、d.Y是经度，顺序完全反了。正确的写法应该是把经纬度拼成数组传入，再取对应坐标：

.attr("cx", function (d) { return projection([d.Y, d.X])[0]; })
.attr("cy", function (d) { return projection([d.Y, d.X])[1]; })

这一步是最可能让所有点从左上角跳回正确位置的关键。

2. 验证投影的scale和translate计算 #

你的投影初始化逻辑是想把旧金山的左上角经纬度[lonleft, lattop]映射到SVG的[0,0]位置，这个思路是对的，但可以加一步验证：
在设置完translate后，在控制台打印：

console.log(projection([lonleft, lattop]));

如果输出不是[0, 0]左右的数值，说明计算有问题。你可以调整scale的计算逻辑，或者用D3内置的工具更省心：

// 先定义旧金山的完整边界（补充南部纬度，比如37.67）
var sanFranciscoBounds = [[lonleft, 37.67], [lonright, lattop]];
// 用d3.geo.scale自动计算合适的scale和translate
var scale = d3.geo.scale().domain(sanFranciscoBounds).range([0, width]);
var projection = d3.geo.mercator()
  .scale(scale.scale())
  .translate(scale.translate());

这种方式会自动帮你适配边界到SVG容器，避免手动计算出错。

3. 最后检查数据格式 #

确认你的points数组里的d.X和d.Y确实是在你设定的经纬度范围内：

• 经度应该在-122.540474到-122.343407之间
• 纬度应该在37.67到37.8423216之间
  如果数据本身就超出范围，也可能导致点显示异常，但你说数据在范围内，所以主要还是前两步的问题。

按照这个思路调整后，应该就能看到点位显示在正确的地图位置上了。

内容的提问来源于stack exchange，提问作者JP..t