html如何获取鼠标,javascript – 如何获取鼠标指向的元素当前属性

我正在使用d3.js并使用我创建的svg,我已经绘制了地图和圆圈.在这些圈子之上,我画了一个看不见的圆圈,这样我就可以在不可见的圆圈上盘旋.现在,当我将鼠标悬停在它们上面时,我想通过调用on事件函数来进行一些转换.在事件函数中,我希望得到我正在悬停的圆的属性.

这是HTML页面的结构

table

tbody

tr

td

svg

rect (boundary of canvass)

g id=outerG

g

path

g

path

g

circle

g

circle

g id=invisibleCircle

g

circle cx,cy,r,text --> I will hover over this circle & access attributes

g

circle cx,cy,r,text

当我将鼠标悬停在不可见的圆圈上时,我正在对该特定圆圈进行过渡,因为我需要访问该不可见圆圈的属性.

这是代码

var radius=some logic to calculate radius

//Main circle d3.select("body").select("svg").select("#outerG").insert("g","#invisibleG").append("circle")

.attr("cx",coords[0])

.attr("cy",coords[1])

.attr("r",radius)

.attr("class","circle")

.attr("id",weekData[q].bob[p].city+"circle")

.style('fill', 'tan');

//Invisible circle d3.select("body").select("svg").select("#outerG").select("#invisibleG").append("g").append("circle")

.attr("cx",coords[0])

.attr("cy",coords[1])

.attr("r",radius)

.attr("class","inviCircle")

.attr("id",weekData[q].bob[p].city+"invisible")

.style('fill-opacity', '0')

.on("mouseover",function(){

var r=d3.select(this).attr("cx");

d3.select(this).style('fill','tan').style('fill-opacity', '1').transition()

.duration(1000)

.attr("r",r) ;

d3.select(this).attr("stroke","blue").attr("stroke-width",4);

})

.on("mouseout",function(){

// var r=d3.select(this).attr("cx");

d3.select(this).attr("stroke-width",0)

.style('fill-opacity','0')

.attr("r",radius);});

}

}

解决方法:

在事件处理程序中,这指的是当前元素.所以你可以做d3.select(this).attr(…)来获取你想要的任何属性的值.

标签：javascript,d3-js

来源： https://codeday.me/bug/20190725/1532119.html