在SVG中的坐标处选择元素

Question

所以，我有一个从 Adob​​e Illustrator 导出的 SVG（插图文件不再可用）。我还有一个带有数据和坐标(x1, y1,x2, y2) 的csv。对于 SVG 中的这些值，我已经 ctrl+f'd 并且它们都不在其中。我的猜测是这是因为 adobe illustrator 移动了所有内容（尽管我可能是错的）。

我的问题是，是否有办法使用 d3 或其他库在给定坐标处获取元素（或多个元素，我知道 SVG 是多层的）。我的目标是使用 CSV 的数据生成工具提示。当用户将鼠标悬停在 svg 中给定坐标处的元素上时，它应该从 csv 中下拉一些数据。关于如何实现这一点的任何其他建议？

Answer 1

当你说你想“通过坐标选择一个元素” 使用 D3 时，对我来说这听起来像是 XY problem。不仅因为它很复杂，还因为您可能不需要它。

如果您只想在鼠标（周围）在给定坐标处显示一些信息，这是我的建议：使用您的 CSV 坐标数据创建一堆透明矩形，并将 mouseover 附加到这些矩形： ：

var svg = d3.select("svg");
var rects = svg.selectAll(".rects")
    .data(data)
    .enter()
    .append("rect")
    .attr("opacity", 0)
    .attr("width", d=>d.x2 - d.x1)
    .attr("height", d=>d.y2 - d.y1)
    .attr("x", d=>d.x1)
    .attr("y", d=>d.y1)
    .on("mouseover", d=>{
        //show your tooltip
    });