Selecting element at coordinates in SVG

Question

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?

@ray yeah, that doesn't change the fact that the coordinates are different — Jake Sylvestre, Dec 13 '16 at 06:33
Possible duplicate of [getElement by position?](http://stackoverflow.com/questions/6995736/getelement-by-position) — altocumulus, Dec 13 '16 at 09:26

score 2 · Accepted Answer · edited Mar 20 '17 at 10:29

2

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

edited Mar 20 '17 at 10:29

Community

1
1

answered Dec 13 '16 at 06:54

Gerardo Furtado

100,839
9
121
171

Wait, so what are X1, x2, y1, y2 in here? – Jake Sylvestre Dec 13 '16 at 06:57
I edited the answer using rectangles instead of circles. – Gerardo Furtado Dec 13 '16 at 07:18
Ah ok that makes sense – Jake Sylvestre Dec 13 '16 at 11:34

Selecting element at coordinates in SVG

1 Answers1