how to pass same object on which javascript event is called in d3.js

Question

I am using d3.js and using that I have created svg on which I have drawn maps and circle. There are many circles and each of them have unique id but same class. Now when I hover over them I want to do some transition by calling an oneevent function.

Here is the structure of HTML page

table
 tbody
  tr
    td
     svg
       rect  (boundary of canvass)
        g
         g
          path
          circle id(xyz)
         g
          path
          circle(pqr)

I want that when I hover on any circle only that circle should show do transition.

Here is my code which is not working.

var radius=(weekData[q].bob[p].reach)/15;
    d3.select("body").select("svg").select("#outerG").append("g").append("circle")  
         .attr("cx",coords[0])
            .attr("cy",coords[1])
            .attr("r",radius)
            .attr("class","circle")
            .attr("id","xyz")
            .style('fill', 'tan')
            .attr("onmouseover","myHoverFunction(this)")
                        .attr("onmouseout","myHoverOutFunction(this)");


    function myHoverFunction(obj)
    {

    d3.select("this.obj").transition()
                        .duration(1000)
                        .attr("r",40)
                        .attr("stroke","red")
                        .attr("stroke-width",4);

    }

Please let me know how can I solve the problem.

Lars Kotthoff · Accepted Answer · 2013-12-16T18:57:07.770

1

Your code should look like this.

d3.select("body").select("svg").select("#outerG").append("g").append("circle")  
 .attr("cx",coords[0])
    .attr("cy",coords[1])
    .attr("r",radius)
    .attr("class","circle")
    .attr("id","xyz")
    .style('fill', 'tan')
    .on("mouseover", myHoverFunction);

function myHoverFunction() {
  d3.select(this).transition()
                .duration(1000)
                .attr("r",40)
                .attr("stroke","red")
                .attr("stroke-width",4);
}

edited Dec 16 '13 at 18:57

answered Dec 16 '13 at 17:50

Lars Kotthoff

107,425
16
204
204

all the circles are always transited by default without mouseover to selected circle.. – user3074097 Dec 16 '13 at 18:34
How do I pass some arguments too?Lets say on mouse hover I want to display some data inside the circle and onmouseout I want to bring the circle back to previous state.For this I want to send some arguments too. – user3074097 Dec 16 '13 at 19:04
You can't directly, you would have to use a closure. If your arguments are part of the data bound to elements, you can just access that. – Lars Kotthoff Dec 16 '13 at 19:09
I didn't get you.what is closure and and how arguments are bound to elements? – user3074097 Dec 16 '13 at 19:18
In that case I would suggest having a look at the tutorials on the D3 page. They explain the concepts behind it in more detail. – Lars Kotthoff Dec 16 '13 at 19:32
okay I will go through tutorials.Can you please tell me the difference between .attr("onmouseover","myHoverFunction(this)") and .on("mouseover", myHoverFunction);....and why there is no "()" after function..? – user3074097 Dec 17 '13 at 06:10
The first is just a string. It won't do anything. There's no `()` because you're not calling the function, but passing it in as an argument. – Lars Kotthoff Dec 17 '13 at 09:06
I am not able to pass arguments to the function call.example I need to send radius and some other data to "myHoverFunction".Please help me out.I am stuck at this for many hours.May be some links could help me Please. – user3074097 Dec 17 '13 at 10:46
As I've said, you can use closures for that. [This question](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work) for example has more information. – Lars Kotthoff Dec 17 '13 at 10:56

score 0 · Answer 2 · answered Dec 16 '13 at 17:53

0

I can't test it out easily, but you might try:

d3.select("#outerG")
  .append("g").append("circle")  
  .attr( {
    cx: coords[0],
    cy: coords[1],
    r: radius,
    class: 'circle',
    id: 'xyz'
  } )
  .style('fill', 'tan')
  .on("mouseover", myHoverFunction)
  .on("mouseout", myHoverOutFunction)

function myHoverFunction() {
  d3.select(this).transition()
  ⋮

answered Dec 16 '13 at 17:53

dysbulic

3,005
2
28
48

Thanks.Your code is working.One more thing How do I retain the state(ie radius ) of the circle.Actually on mouseover I want to increase the radius by same extent for all circles but, on mouseout I want bring it back to its previous radius. – user3074097 Dec 16 '13 at 18:42

how to pass same object on which javascript event is called in d3.js

2 Answers2