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 天内回答，所以我会在之后这样做。