我正在使用d3.js并使用它创建了svg,并在其上绘制了地图和圆圈。在这些圆圈的上方,我绘制了不可见的圆圈,以便可以在不可见的圆圈上悬停。现在,当我将鼠标悬停在它们上面时,我想通过调用on事件函数进行一些转换。在此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);});
}
}
在事件处理程序中,this
引用当前元素。因此,您可以d3.select(this).attr(...)
获取所需的任何属性的值。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句