javascript - How can I bring a circle to the front with d3? -

first of all, using d3.js display different sized circles in arrays. on mouse over, want circle being moused on become bigger, can do, have no idea how bring front. currently, once it's rendered, it's hidden behind multiple other circles. how can fix this?

here's code sample:

   .on("mouseover", function() {      d3.select(this).attr("r", function(d) { return 100; })   }) 

i tried using sort , order methods, didn't work. i'm pretty sure didn't correctly. thoughts?

you have change order of object , make circle mouseover being last element added. can see here: https://gist.github.com/3922684 , suggested nautat, have define following before main script:

d3.selection.prototype.movetofront = function() {   return this.each(function(){     this.parentnode.appendchild(this);   }); }; 

then have call movetofront function on object (say circles) on mouseover:

circles.on("mouseover",function(){   var sel = d3.select(this);   sel.movetofront(); }); 

edit: suggested henrik nordberg necessary bind data dom using second argument of .data(). necessary not lose binding on elements. please read henrick's answer (and upvote it!) more info. general advice, use second argument of .data() when binding data dom in order leverage full performance capabilities of d3.

---

edit: mentioned clemens tolboom, reverse function be:

d3.selection.prototype.movetoback = function() {      this.each(function() {          this.parentnode.firstchild           && this.parentnode.insertbefore(this, firstchild);          }      });  };