Javascript 如何获取鼠标指向的当前元素属性

Javascript 如何获取鼠标指向的当前元素属性,javascript,d3.js,Javascript,D3.js,我正在使用d3.js,并使用它创建了svg,在上面我绘制了地图和圆圈。在这些圆的上面,我画了一个看不见的圆,这样我就可以在看不见的圆上盘旋。现在,当我将鼠标悬停在它们上面时,我想通过调用一个on-event函数来进行一些转换。在这个on-event函数中,我想获得我所悬停的圆圈的属性 下面是HTML页面的结构 table tbody tr td svg rect (boundary of canvass)

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

下面是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.选择(this).attr(…)
以获取您想要的任何属性的值。

您已经准备好使用“d3.选择(this).attr(“cx”);”来访问鼠标指向的圆的属性。是的,我找到了。