Question

所以，我有一个从Adobe Illustrator导出的SVG（插图文件不再可用）。我还有一个包含数据和坐标(x1, y1,x2, y2)的csv。我在SVG中ctrl+f'得到这些值，但没有一个在那里。我的猜测是因为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
    });

选择SVG坐标处的元素

1 个答案: