I am using d3.js and using that I have created svg on which I have drawn maps and circles. on top of those circles I have drawn invisible circle so that I could do hovering on invisible circles. Now when I hover over them I want to do some transition by calling an on event function.Inside this on event function I want to get attributes of the circle on which I am hovering.

Here is the structure of HTML page

   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

When I hover over the invisible circles then I am doing transitions on that particular circle ,for that I need to access attributes of that invisible circle.

Here is the code

        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);});

    }

    }

I am using d3.js and using that I have created svg on which I have drawn maps and circles. on top of those circles I have drawn invisible circle so that I could do hovering on invisible circles. Now when I hover over them I want to do some transition by calling an on event function.Inside this on event function I want to get attributes of the circle on which I am hovering.

Here is the structure of HTML page

   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

When I hover over the invisible circles then I am doing transitions on that particular circle ,for that I need to access attributes of that invisible circle.

Here is the code

        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);});

    }

    }

• javascript
• d3.js

• You allready are accesing attributes of circle pointed by mouse using "d3.select(this).attr("cx");" – cuckovic Commented Dec 17, 2013 at 14:33

1 Answer 1

In the event handler, this refers to the current element. So you can do d3.select(this).attr(...) to get the values of any attributes you want.