在 d3 svg 路径中​​查找坐标

Question

阅读前请注意： 如果你知道答案，这是我正在为大学课程做的一个项目；请只提示我正确的方向或举一个例子。出于同样的原因，我也不会发布我的全部代码，但我会详细描述我的进度。

对于这个项目，我用 d3 创建了一个地图。我正在添加功能，但在互联网上搜索了几个小时并尝试了一些东西后，我找不到这个问题的答案：

要在地图的侧边栏中显示额外信息，我需要检查数据中的坐标是否在给定的 svg 路径中​​。 我可以在我的地图上显示坐标，使用：

var coords = projection([longitude, latitude]);

之后我可以使用数组在正确的区域显示坐标。

路径是这样绘制的：

svg.selectAll(".geodata")
  .data(geodata)
  .enter().append("path")

地理数据定义为：

var geodata = topojson.feature(data, data.objects.collection).features;

这是一个转换为 geojson 的 topojson。 （它被存储为一个 topojson，因为它们是较小的文件，这将用于 web 应用程序。）

但是，我无法检查某些坐标是否在给定路径中，这是我尝试过的：

• polygonContains() - 我相信这个不起作用，因为我正在处理路径，即使它在技术上是一个多边形，它当然不会存储为一个多边形，所以我不能以这种方式操作它。李>
• document.elementByPoint() - 这会返回最顶部的元素并转到较低的元素将无济于事，因为那时我无法区分具体路径。

如果您有想法或知道示例，我想在下面听到。 :)

给出的答案：

将显示设置为无并在 elementByPoint 下方找到您的元素：

console.log(this);
var element = document.elementFromPoint(coords[0], coords[1]);
console.log(element);
element.style.display = "none";

我的评论： 这不起作用，它会在 div-tags 中为您提供结果，而不是您单击的相应路径（本例中为县）。

Answer 1

由于我无法在评论部分将问题标记为已回答，我将在此处复制评论并将其标记为已回答。

使用 svg 路径查看点是否在多边形内假定笛卡尔坐标 - 虽然 d3 沿大圆坐标对路径进行采样，但采样率可能足够粗略，以至于点落在 svg 形状之外但在地理范围内特征（它会在视觉上出现在我们的边界上）。使用原始地理数据尝试 d3.geoContains()（如果您的原始地理数据是球形的：纬度和经度对）- Andrew Reid

非常感谢安德鲁！

编辑：我现在注意到我无法在接下来的 2 天内将其设置为已回答，所以我会在之后这样做。