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

Question

First of all, I am using d3.js to display different sized circles in arrays. On mouse over, I want the circle being moused over to become bigger, which I can do, but I have no idea how to bring it to the front. Currently, once it's rendered, it's hidden behind multiple other circles. How can I fix this?

Here's a code sample:

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

I tried using the sort and order methods, but they didn't work. I'm pretty sure i didn't do it correctly. Any thoughts?

Angelaangele

I'm still new to d3.js, but I think you should be able to accomplish this by hiding/showing the element in order to re-render it? – Lam

From this post it seems that re-appending the element to the svg has this effect. #482615 – Lam

It's not working for me :\ – Angelaangele

Mike demonstrated a few of ways of doing this in this thread: groups.google.com/d/msg/d3-js/OqD9_puVTfg/aMDYbGHB2fAJ – Revision

d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); }; And then you can say selection.moveToFront(). – Revision

See how Ian uses this method in this tributary entry: enjalot.com/tributary/3651456 – Revision

Fiddle here using the moveToFront approach. – Ditto

Answer 1

TL;DR

With latest versions of D3, you can use selection.raise() as explained by tmpearce in its answer. Please scroll down and upvote!

---

Original answer

You will have to change the order of object and make the circle you mouseover being the last element added. As you can see here: https://gist.github.com/3922684 and as suggested by nautat, you have to define the following before your main script:

d3.selection.prototype.moveToFront = function() {
  return this.each(function(){
    this.parentNode.appendChild(this);
  });
};

Then you will just have to call the moveToFront function on your object (say circles) on mouseover:

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

Edit: As suggested by Henrik Nordberg it is necessary to bind the data to the DOM by using the second argument of the .data(). This is necessary to not lose binding on elements. Please read Henrick's answer (and upvote it!) for more info. As a general advice, always use the second argument of .data() when binding data to the DOM in order to leverage the full performance capabilities of d3.

---

Edit: As mentioned by Clemens Tolboom, the reverse function would be:

d3.selection.prototype.moveToBack = function() {
    return this.each(function() {
        var firstChild = this.parentNode.firstChild;
        if (firstChild) {
            this.parentNode.insertBefore(this, firstChild);
        }
    });
};

Porty

I needed the reverse too: this is what I did: d3.selection.prototype.moveToBack = function() { return this.each(function() { var firstChild = this.parentNode.firstChild; if (firstChild) { this.parentNode.insertBefore(this, firstChild); } }); }; – Neumark

See @Henrik Nordberg answer below. Your data will get out of sync doing this – Defoe

Hi @christopher Chiche, I tried your solution here: #33001225 but still can't get the positions of the line graph to change. Thoughts? – Fleuron

doesnt work in IE if you have other event handlers on node getting moved... they get dropped – Goins

Answer 2

As of d3 version 4, there are a set of built in functions that handle this type of behavior without needing to implement it yourself. See the d3v4 documentation for more info.

Long story short, to bring an element to the front, use selection.raise()

selection.raise()

Re-inserts each selected element, in order, as the last child of its parent. Equivalent to:

selection.each(function() {
this.parentNode.appendChild(this);
});

Nanci

Answer 3

If you use the moveToFront() method, make sure you are specifying the second argument to the data() join method, or your data will be out of synch with your DOM.

d3.js joins your data (provided to a parse()) method with DOM elements you create. If you manipulate the DOM as proposed above, d3.js won't know what DOM element corresponds to what data 'point' unless you specify a unique value for each data 'point' in the data() call as the API reference shows:

.data(data, function(d) { return d.name; })

Biel

can you elaborate .. which data to pass ? – Parameter

@DavidWilton better late than never, I have added a reference to this answer in my answer. – Porty

Answer 4

From my painful experience with IE9, using parentNode.appendChild may lead to lost event handlers in the nodes. So I tend to use another approach, that is, sorting the nodes so that the selected one is above the others:

     .on("mouseover", function(selected) {
        vis.selectAll('.node')
        .sort(function(a, b) {
          if (a.id === selected.id) {
            return 1;
          } else {
            if (b.id === selected.id) {
              return -1;
            } else {
              return 0;
            }
          }
        });
      })

Fleshly

can you elaborate here a little bit.. what is vis in your code. And is 'node' a class of your svg elements? I am running into the same issue on IE – Psychogenesis

vis is a D3 selection of the parent element containing the elements which you want to reorder. 'node' is the CSS class which these elements should have. – Fleshly

terser sorting function : function(a,b) {s = selected.id; return (a.id == s) - (b.id == s);} – Orthoscope

Great solution for IE9. – Wachter

how do I get a reference to vis from outside the mouseover event? I'm trying to find vis inside the dragstart event but I can't find it anywhere. this references the element that I want to bring to the top. – Capone