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

用户名

我正在使用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);});

    }

    }
拉尔斯·科特霍夫(Lars Kotthoff)

在事件处理程序中,this引用当前元素。因此,您可以d3.select(this).attr(...)获取所需的任何属性的值。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

查找当前鼠标指向的html元素的字体系列?

来自分类Dev

如何获取当前元素属性

来自分类Dev

如何获得组件的当前本机元素?

来自分类Dev

如何使用jQuery在鼠标悬停时找到当前元素?

来自分类Dev

如何在angularjs的鼠标悬停时定位当前元素?

来自分类Dev

如何在交互式绘图(Python)中获得用鼠标指向的(x,y)位置?

来自分类Dev

如何获得视频元素的当前响度水平

来自分类Dev

如何获得元素与当前屏幕位置的偏移量?

来自分类Dev

您如何获得组件的当前本机元素?

来自分类Dev

svg元素的“显示”属性如何影响鼠标事件?

来自分类Dev

如何获取鼠标悬停在元素上的属性

来自分类Dev

鼠标放在元素上时如何更改css属性?

来自分类Dev

如何获得Dygraph中鼠标光标的当前x和y位置

来自分类Dev

如何获得Dygraph中鼠标光标的当前x和y位置

来自分类Dev

xsd:属性指向元素ID

来自分类Dev

如何指向向量元素?

来自分类Dev

jQuery Sortable-如何获取当前拖动的元素属性

来自分类Dev

如何从Meteor中的click事件获取当前元素属性?

来自分类Dev

如何访问当前html元素的某些属性值?

来自分类Dev

如何访问被调用函数的当前元素属性名称

来自分类Dev

jQuery Sortable-如何获取当前拖动的元素属性

来自分类Dev

如何查找具有指向当前DIV或文本区域的“ for”属性的标签

来自分类Dev

如何获得鼠标的坐标?

来自分类Dev

如何获得鼠标光标类型?

来自分类Dev

如何获得鼠标移动事件?

来自分类Dev

如何旋转矩形以指向鼠标

来自分类Dev

如何使播放器始终指向鼠标

来自分类Dev

如何在鼠标上指向符号?

Related 相关文章

热门标签

归档