D3.js 解释d3js投影原理

我正在努力理解d3中地理投影的基础知识，以便能够有效地旋转、缩放和平移坐标

投影结果是否在默认的svg坐标系中，原点在左上角，正y值在网格中向下移动？或者结果是在笛卡尔坐标系中，正y值沿网格向上移动

我做了这个测试。a点位于旧金山的西北部。b点位于旧金山的东南部。我希望a点投影的x值比b点投影的x值小（向左）。同样，我期望a点投影的y值小于（高于）b点的投影

p = d3.geo.transverseMercator()
a = [-122.490402, 37.786453]
b = [-122.389809, 37.72728]
ap = p(a) // [359.30926341688723, -76.50496169565764]
bp = p(b) // [358.9636503828066, -76.46080714063936]

相反，点a的投影x值大于b的投影x值，因此a将在svg画布上位于b的下方

[更新#1]

我一直在调查测试套件。我从中看到了这些价值观：

（在albers test.js中）

（在azimuthal-equal-area-test.js和其他几个文件中）

这告诉我我很困惑

为什么在测试中SF有两个不同的经度/纬度值

很明显，我在杂草丛中。请帮我回到正轨

---

-凯利

啊，现在我已经查过了，我可以看到你的D3坐标是正确的。我已经设置了这个，为您绘制这些点

如果你已经掌握了这一点，我很抱歉，但我会提供一些背景资料。投影的目的是将三维位置转换为二维平面（或屏幕）。有许多不同的投影可以将三维坐标拉伸和弯曲到二维平面中，具体的操作方式反映了投影设计者的期望结果。一些预测更适合美国，阿尔伯斯美国就是一个很好的例子，因为它将阿拉斯加和夏威夷移到了加利福尼亚的西南部。对于给定的一组地球坐标，不同的投影将得到不同的屏幕坐标，这真是一种冗长的说法。要了解这一点，请看杰森·戴维斯或迈克·博斯托克的作品

现在你在正确的投影路径上，你只需要设置D3如何将这些坐标转换到屏幕上。有很多方法可以做到这一点，但我在这里概述了一个我认为最容易理解的方法。在使用投影时，可以设置许多参数，包括缩放、居中、平移、旋转等。这些参数的作用非常简单。“比例”设置的缩放值越大，地图放大的程度越大，“中心”设置地图在坐标中的中心点，“平移”将地图中心发送到屏幕位置，“旋转”将地图旋转

在我设置的bl.ock中，我刚刚使用了比例和中心参数，如中所示：

projection
  .scale(1000)
  .center([-106, 37.5])

---

为了准确地了解这一点是如何改变这些参数的，试着增加比例，这样你就可以把这些点放在哪里，记住把中心放在其中的一个点上，以确保你能看到它们。

要考虑的一点是LAT的长度需要反转到长LAT，希望这能消除混乱。另外，看看这一点，我理解需要反转的横向/纵向的观点——这在过去对我有点影响。然而，在我的例子中，它们是相反的。

"San Francisco, CA": [[ -46.16620803,   77.04946507], [ 448.09318291,   57.65281089]]

projection
  .scale(1000)
  .center([-106, 37.5])