在SVG中的坐标处选择元素
所以,我有一个从Adobe Illustrator导出的SVG(插画文件不再可用)。 我也有一个csv的数据和坐标(x1, y1,x2, y2)
。 我已经为SVG中的这些值提供了ctrl+f
f'd,并且它们都不在其中。 我的猜测是这是因为Adobe Illustrator移动了所有东西(虽然我可能是错的)。
我的问题是,如果有一种方法,使用d3或其他库来获取给定坐标上的元素(或元素,我知道SVG是多层的)。 我的目标是使用CSV的数据来生成工具提示。 当用户将鼠标悬停在svg中给定的坐标上的元素上时,它应该从csv中下拉一些数据。 任何其他建议如何适应这个?
当你说你想用D3“按坐标选择一个元素”时,这听起来像是一个XY问题 。 不仅因为它很复杂,而且因为你可能不需要它。
如果您只想在给定坐标处显示某些信息(这是我的建议):使用您的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
});
链接地址: http://www.djcxy.com/p/95843.html