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