SVGの座標で要素を選択

Question

私はAdobe IllustratorからエクスポートされたSVGを持っています（イラストレータファイルはもはや利用できません）。私もデータと座標を持つCSVを持っています(x1, y1,x2, y2)。私はctrl+fをSVGのこれらの値に使用しましたが、それらのどれもそこにありません。私の推測は、これは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 
    });