Javascript 地图中的圆圈在D3 V4中显示的位置不正确

我使用一个教程来学习如何在D3.v3中生成地图，但我使用的是D3.v4。我只是想让一些圆圈出现在地图上（见下文）。除了圆圈在内华达州上方且应位于湾区外，该代码有效。我想这是地图投影和投影坐标之间的不匹配。我不确定地图的投影是什么，但我尝试将其强制为albersUsa（请参见我生成路径的注释掉的命令），但这会导致整个地图消失。任何帮助都将不胜感激

var w=960，
h=600；
var projection=d3.geoAlbersUsa（）；
var path=d3.geoPath（）
//.投影（投影）
d3.json（“https://d3js.org/us-10m.v1.json，函数（错误，美国）{
如果（错误）抛出错误；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.selectAll（“路径”）
.data（topojson.feature（us，us.objects.states）.features）
.enter（）.append（“路径”）
.attr（“类别”、“状态”）
.attr（“d”，路径）；
追加（“路径”）
.attr（“类别”、“国家边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.states）））
追加（“路径”）
.attr（“类”、“县边界”）
.attr（“d”，路径（topojson.mesh（us，us.objects.countries））；
aa=[-122.490402,37.786453]；
bb=[-122.389809,37.72728]；
svg.selectAll（“圆圈”）
.数据（[aa，bb]）。输入（）
.附加（“圆圈”）
.attr（“cx”，函数（d）{返回投影（d）[0]；}）
.attr（“cy”，函数（d）{返回投影（d）[1]；}）
.attr（“r”，“8px”）
.attr（“填充”、“红色”）
});

您的US json已被投影，为了显示它，您使用了空投影：

var path = d3.geoPath()
             //.projection(projection)

在不定义投影的情况下，topojson/geojson坐标将转换为直线像素坐标。恰好这个特定的topojson文件的像素坐标在[0,0]和[960600]之间，几乎与默认的bl.ock视图大小相同。如果不知道所使用的投影，则无法复制该投影以将地理要素与数据对齐。除非直接使用像素值放置要素并完全跳过投影（对于不靠近可识别地标或精度重要的点不有用）

使用

geoUsaAlbers（）

进行投影时，您的US topojson功能将消失，因为您在平面上获取像素坐标，并将其转换为svg坐标，就像它们是三维球体上的点一样（d3投影需要经纬度对）

相反，请使用未投影的topojson或geojson。也就是说，它包含纬度/经度对，并将该数据与点一起投影。关于使用代码（但将投影指定给

路径

）的美国未投影（lat/long对）json的示例，请参见此

要检查是否有纬度/经度对，可以在geojson文件中轻松查看这些要素的几何图形，并查看这些值是否为有效的长纬度点。对于topojson，topojson库将功能转换为geojson，因此您可以在转换后查看几何图形

以下是一个未被拍摄的美国电影：

---

假设您确实想要使用相同的topojson文件，那么我们可以推断它使用的投影。首先，我将显示投影点（通过使用未投影的美国轮廓）与已投影的topojson（未投影的topojson使用

d3.geoabersua（）

进行投影，而投影的topojson使用空投影）之间的差异：

投影d3.geoAlbersUsa很可能针对bl.ocks.org默认视口960x500进行了优化。未投影的数据集有一个大约960x600的边界框，因此，如果我们将比例增加600/500，并调整转换，我们可以在960x600的svg中对齐我们的功能：

var projection = d3.geoAlbersUsa();
var scale = projection.scale() * 600 / 500;
projection.scale(scale).translate([960/2,600/2])
var projectedPath = d3.geoPath().projection(projection);

而且，这看起来很协调，我看不出两者之间的区别：

下面是一个显示对齐特征的示例

但正如我在评论中提到的，即使您可以调整功能：

---

任何缩放或居中都会有问题，因为您需要对已经投影的数据使用geoTransform，但对原始地理数据使用geoProjection。使用所有（统一）投影数据或所有未投影数据使生活更简单。

您的US json已经投影，为了显示它，您使用了空投影：

var path = d3.geoPath()
             //.projection(projection)

在不定义投影的情况下，topojson/geojson坐标将转换为直线像素坐标。恰好这个特定的topojson文件的像素坐标在[0,0]和[960600]之间，几乎与默认的bl.ock视图大小相同。如果不知道所使用的投影，则无法复制该投影以将地理要素与数据对齐。除非直接使用像素值放置要素并完全跳过投影（对于不靠近可识别地标或精度重要的点不有用）

使用

geoUsaAlbers（）

进行投影时，您的US topojson功能将消失，因为您在平面上获取像素坐标，并将其转换为svg坐标，就像它们是三维球体上的点一样（d3投影需要经纬度对）

相反，请使用未投影的topojson或geojson。也就是说，它包含纬度/经度对，并将该数据与点一起投影。关于使用代码（但将投影指定给

路径

）的美国未投影（lat/long对）json的示例，请参见此

要检查是否有纬度/经度对，可以在geojson文件中轻松查看这些要素的几何图形，并查看这些值是否为有效的长纬度点。对于topojson，topojson库将功能转换为geojson，因此您可以查看geometr