Element an Koordinaten in SVG auswählen

Question

Also habe ich eine SVG, die aus Adobe Illustrator exportiert wurde (die Illustrator-Datei ist nicht mehr verfügbar). Ich habe auch eine CSV mit Daten und Koordinaten (x1, y1,x2, y2). Ich habe ctrl+f 'd für diese Werte in der SVG und keiner von ihnen sind da drin. Meine Vermutung ist, das ist, weil Adobe Illustrator alles bewegt (obwohl ich falsch liegen könnte).

Meine Frage ist, wenn es einen Weg gibt, mit d3 oder einer anderen Bibliothek, um das Element (oder Elemente, ich weiß, SVG ist mehrschichtig) an einer gegebenen Koordinate zu bekommen. Mein Ziel ist es, die CSV-Daten zu verwenden, um einen Tooltip zu generieren. Wenn ein Benutzer über die Elemente an den in der Svg angegebenen Koordinaten schwebt, sollte er mit einigen Daten aus dem CSV herunterfallen. Irgendwelche anderen Vorschläge, wie man das erledigt?

Answer 1

Wenn Sie sagen, dass Sie "Wählen Sie ein Element durch Koordinaten" mit D3 wollen, klingt es wie ein XY problem für mich. Nicht nur weil es kompliziert ist, sondern weil Sie das wahrscheinlich nicht brauchen werden.

Wenn Sie nur einige Informationen anzeigen möchten, wenn sich die Maus an einer bestimmten Koordinate befindet, ist dies mein Vorschlag: Erstellen Sie eine Reihe transparenter Rechtecke mit Ihren CSV-Koordinaten und fügen Sie die mouseover an diese Rechtecke an:

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