Selecting element at coordinates in SVG

So, I have a SVG that was exported from Adobe Illustrator (the illustrator file is no longer available). I also have a csv with data and coordinates (x1, y1,x2, y2) . I've ctrl+f 'd for these values in the SVG and none of them are in there. My guess is this is because adobe illustrator moved everything (although I could be wrong).

My question is if there's a way, using d3 or some other library to get the element (or elements, I know SVG is multilayered) at a given coordinate. My goal here is to use the CSV's data to generate a tooltip. When a user hovers over the elements at the coordinates given in the svg, it should drop down with some data from the csv. Any other suggestions on how to accomlpish this?

---

When you say that you want to "select an element by coordinates" using D3, it sounds like a XY problem to me. Not only because it's complicated, but because you probably won't need that.

If all you want is showing some information when the mouse is (around) at a given coordinate, this is my suggestion: create a bunch of transparent rectangles using your CSV coordinates data, and attach the mouseover to those rectangles::

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
    });

链接地址: http://www.djcxy.com/p/95844.html

上一篇: 如何从WF4工作流调用WF3.5 WorkFlow

下一篇: 在SVG中的坐标处选择元素