title: Update line order (z-orientation) on mouseover in d3
body: <p>I am new to using d3 and JavaScript and would appreciate some constructive feedback. I'm mocking up a practice example to learn d3 that involves plotting climate data (temperature anomaly) from 1880-2010 from two sources (GISS and HAD). So far I have generated a multiple line chart in d3 using this data. Code and data are here <a href="https://gist.github.com/natemiller/0c3659e0e6a0b77dabb0" rel="nofollow">https://gist.github.com/natemiller/0c3659e0e6a0b77dabb0</a></p>
  
  <p>In this example the data are originally plotted grey, but each line colored a different color on mouseover. </p>
  
  <p>I would like to add two additional features. </p>
  
  <ol>
  <li><p>I would like, on mouseover, to reorder the lines so that the moused-over line is on top, essentially reorder the lines. I've read that this requires essentially replotting the SVG and I have tried code along the lines of this</p>
  
  <pre><code>source.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", "lightgrey")
  .on("mouseover", function() {
    if (active) active.classed("highlight", false);
    active = d3.select(this.parentNode.appendChild(this))
        .classed("highlight", true);
  })
        .style("stroke",function(d) {return color(d.name);})
  .on("mouseout", function(d) {
  d3.select('#path-' + d.name)
  .transition()
  .duration(750)
  .style("stroke", "lightgrey")
  })
  .attr("id", function(d, i) { return "path-" + d.name; });
  </code></pre></li>
  </ol>
  
  <p>where the .on("mouseover"... code is meant to highlight the current "moused-over" line. It doesn't seem to work in my example. All the lines are highlighted initially and then turn grey with the mouseover/mouseout. If someone could help me identify how to update my code so that I can reorder the lines on mouseover that would be great!</p>
  
  <ol>
  <li><p>I have been playing around with labeling the lines such that when either the line or its label is moused-over the line and label colors update. I've played around a bit using id's but so far I can't get both the text and the line to change color. I've managed to 1. mouseover the line and change the color of the text, 2. mouseover the text and change the color of the line, 2. mouseover the line and change the line, but not have both the line and the text change color when either of them are moused-over. Here is a section of code that serves as a start (using ids), but doesn't quite work as it only specifies the path, but not the text and the path. I've tried adding them both to d3.select('#path-','#text-'..., and variations on this, but it doesn't seem to work.</p>
  
  <pre><code>source.append("path")
  .attr("class", "line")
  .attr("d", function(d) { return line(d.values); })
  .style("stroke", "lightgrey")
  .on("mouseover", function(d){
  d3.select(this)
  .style("stroke",function(d) {return color(d.name);});
  })
  .on("mouseout", function(d) {
  d3.select('#path-' + d.name)
  .transition()
  .duration(750)
  .style("stroke", "lightgrey")
  })
  .attr("id", function(d, i) { return "path-" + d.name; });
  
  
  
  source.append("text")
  .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 15]}; })
  .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
  .attr("x", 5)
  .attr("dy", ".35em")
  .style("stroke", "lightgrey")
  .on("mouseover", function(d){
  d3.select('#path-' + d.name)
  .style("stroke",function(d) {return color(d.name);});
   })
  .on("mouseout", function(d) {
  d3.select('#path-' + d.name)
  .transition()
  .duration(750)
  .style("stroke", "lightgrey")
  })
  .text(function(d) { return d.name; })
  .attr("font-family","sans-serif")
  .attr("font-size","11px")
  
  .attr("id", function(d, i) { return "text-" + d.name; });
  </code></pre></li>
  </ol>
  
  <p>I greatly appreciate your help. I am new to d3 and this help-serve. Its a steep learning curve at the moment, but I hope this example and the code is reasonably clear. If its not let me know how I can make it better and I can repost the question.</p>
  
  <p>Thanks so much,</p>
  
  <p>Nate</p>