我有一个由x和y坐标组成的数组:
var coordinateX = [10,20,30,40,50,....];
var coordinateY = [10,20,30,40,50,....]:
这些坐标是圆心,当鼠标悬停在圆上时我希望显示工具提示。
for (var i = 0; i < circles.length; i++) {
circles[i].addEventListener('mousemove', show);
circles[i].addEventListener('mouseout', hide);
}
工具提示是以矩形和文本为内容的 g 元素表示
<g id="poligon" visibility="hidden" class="element">
<rect width="80" height="20" fill="white"/>
<text class="tooltip" x="4" y="15" dominant-baseline="centered">Tooltip</text>
</g>
var poligon = svgDoc.getElementById("poligon")
function show(evt) {
poligon.setAttributeNS(null, "transform","translate(" + coordinateX[i] + ", " + coordinatey[i] + ")");
poligon.setAttributeNS(null, "visibility", "visible");
textTooltipVrijednost.data = evt.target.getAttributeNS(null, "class");
}
function hide(){
poligon.setAttributeNS(null, "visibility", "hidden");
}
我尝试使用
setAttribute
和更改转换属性的x、y值来翻译g元素,但我只得到了最后一个位置值。如何为每个位置动态地执行此操作?
show(evt) {..coordinateX[i] + "," + coordinateY[i]
中,索引i
是从哪里来的?如果您想让它按您最初创建事件监听器的索引移动,它将无法正常工作,因为索引i
未与事件监听器一起存储。 我也遇到了这个问题,并通过在相关数据与实际 DOM 节点之间使用 Map 结构来解决了它。 - Scott Andersoni
(你用来索引circles
的变量不再存在)索引你的坐标数组,但是这会创建一个引用错误而不是你所描述的问题。我认为我错了,你应该听取其他人的意见。尽管如此,JS中的Map
允许你将任何东西直接关联成对: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map - Scott Anderson