d3.js circle hover animation

Question

Thanks for stopping by. Quick question:

I have a simple network diagram here . And I have assigned mouse over effects on the circle. So when You hover it the circle is 'highlighted' by increasing its radius, multiplying it by 3.

 function mouseoverC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", d3.select(this).select("circle").attr("r") * 3);
}

function mouseoutC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", d3.select(this).select("circle").attr("r") / 3);
}

And when the mouse is out/away it divides it to bring it back to its original radius. The reason for doing this way is because the circle radius wont be the same for all, it will be different. Now it works if You do it neatly, but if one doesn't wait for animation to finish and takes the mouse out and quickly puts it back on again the circle increases continuously, of course vice versa if you quickly move your mouse over when its being brought back to its original state it gets supper small.

What would be the best way to troubleshoot this problem ?

You would need to get and store the radius of each circle at initiation and then on rollover get the stored radius (rather than the current radius) and times it by 3, on roll out do the same but / by 3 — r8n5n, Oct 22 '14 at 16:03
Ah, okay I was thinking to create a custom attribute when the circle is created and store the original radius there. Just wanted to see maybe there's more efficient way of doing this. Thanks tho — nlv, Oct 22 '14 at 16:24
Why don't you set a fixed number? Or do you have different circle sizes somewhere? — kwoxer, Oct 23 '14 at 09:39

score 4 · Accepted Answer · answered Oct 22 '14 at 16:23

You can add variable for init radius when create nodes :

nodes = tasks.map(function(k){
  var entry;
  entry = {
    name: k,
      radius:10
  };
  if (map.get(k).fixed) {
    entry.fixed = true;
    entry.x = map.get(k).x;
    entry.y = map.get(k).y;
  }
  return entry;
});

Then you change his size on mouseover like this :

function mouseoverC() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r", function(d){return d.radius*3});
}

//hover opposite, to bring back to its original state 
function mouseoutC() {
    d3.select(this).select("circle").transition()
        .duration(750)
    .attr("r", function(d){return d.radius});
}

Maybe You could take a look at this [link](http://stackoverflow.com/questions/26495048/manipulating-d3-network-diagram) question as well please, since You have a good idea about d3.js — nlv, Oct 23 '14 at 09:58

d3.js circle hover animation

1 Answers1