title: How can I bring a node and all of its connected nodes to the front of a graph on mouseover?
body: <p>(edit: question is solved, see below) I am a biologist who does work mapping out synaptic connectivity and analyzing the data. I've got some ideas for visualizing the network that I think are pretty cool and I've been trying to learn D3 in order to implement them in a way I can share the visualizations over the web. I have a graph composed of nodes and links. When I mouseover a node, I want that node as well as all connected nodes to move to the top of the graph in order to not be obscured by the surrounding nodes. I am pretty new to programming in general, so please excuse if this is a dumb question. Right now, I have it working for the mode directly moused over using a suggestion Mike Bostock put forward in response to someone elses question.. that is, to define a function that moves something to the first child position:</p>
  
  <pre><code>d3.selection.prototype.moveToFront = function() { 
  return this.each(function() { this.parentNode.appendChild(this);}); 
  }; 
  </code></pre>
  
  <p>To also create an index of which nodes are connected (taken from another post)</p>
  
  <pre><code>var linkedByIndex = {};
  links.forEach(function(d) {
      linkedByIndex[d.source.Id + "," + d.target.Id] = 1;
              });
  
  function isConnectedNode(a, b) {
      linkedByIndex[a.Id + "," + b.Id] || linkedByIndex[b.Id + "," + a.Id] || a.Id == b.Id;
              }
  </code></pre>
  
  <p>Then have a mouseover function that uses these things:</p>
  
  <pre><code>function nodeMouseover(d){
       d3.select(this).moveToFront();
           svg.selectAll("circle").transition()
                 .duration(250)
                 .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
                 .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
  }
  </code></pre>
  
  <p>Now, this all works for moving the node I've moused over to the front.I would also like all of the CONNECTED nodes to be brought to the front, so what I want to do is this: use the .active class attribute of the nodes(which is assigned to all connected nodes successfully) to again call moveToFront within the mouseover function so they too are moved to the front, like this:</p>
  
  <pre><code>function nodeMouseover(d){
       d3.select(this).moveToFront();
           svg.selectAll("circle").transition()
                 .duration(250)
                 .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})
                 .attr("class", function(e){return isConnectedNode(d,e) ? "active":"inactive";});
           svg.selectAll(".active").moveToFront();
  }
  </code></pre>
  
  <p>But, this doesn't work and I can't seem to figure out why... any ideas? Any simple way to do this? I am having fun with this and trying really to understand how things work here, so any help is very much appreciated.</p>
  
  <p>SOLUTION:
  Ok, everything is solved by using an .each() statement. My nodeMouseover now looks like this:</p>
  
  <pre><code>function nodeMouseover(d){
                  svg.selectAll(".link").attr("display", function(p){return isConnectedEdge(d, p) ? "block" : "none";});
  
                  svg.selectAll("circle").each(function(e){if (isConnectedNode(d,e)){d3.select(this).moveToFront();}})
                                          .transition()
                                          .duration(250)
                                          .attr("r", function(e){return isConnectedNode(d, e) ? 15 : 6;})}
  </code></pre>
  
  <p>Note that I am no longer using the class attribute. Is this the best way to have done it? Thanks again to anyone who had a look at it.</p>