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

Question

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

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

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

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 标签内为您提供结果，而不是您单击的相应路径(在本例中为县)。

Answer 1

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

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

非常感谢安德鲁!

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