title: Selecting path within G element and change style
body: <p>Essentially I'm trying to have all the paths except the one being hovered over turn gray, while the one being selected keeps it's original color. I've been able to turn all of the other paths gray, however I'm having trouble with the "select.this" function and actually accessing the path I want to change style.  It would appear that I've actually managed to get down to the path element within the g group, however I'm confronted with an error in the console saying </p>
  
  <pre><code>Uncaught TypeError: Property 'style' of object #&lt;SVGGElement&gt; is not a function
  </code></pre>
  
  <p>Relevant code:</p>
  
  <pre><code>    svg.selectAll("g.team")
      .on("mouseover",function(){
              console.log("I see you!");
              var lineName;
              var accuracy = 10;
  
              svg.selectAll("path.team.line").style("stroke","#C0C0C0"); 
              //set all to gray
  
              var selectedArray = d3.select(this);
              console.log(selectedArray);
  
              var selectGroup = selectedArray[0];
              console.log("should be group:"+selectGroup);
  
              var selectedLine = selectGroup[0];;
  
              selectedLine.style("color",function(d){  //let active keep color
              lineName = abbrDict[d.name];  //full name to be at end of line
              return color(d.name);
          });
  
              //get position of end of line
          var len = d3.select(this).children().node().getTotalLength();
          var pos = d3.select(this).node().getPointAtLength(len);  
          //append text to end of line
          svg.append("text")
              .attr("id","tooltip")
              .attr("x",pos.x-55)
              .attr("y",pos.y)
              .text(lineName)
              .style("font-family","sans-serif")
              .style("font-size",13);
  
              this.parentNode.parentNode.appendChild(this.parentNode); 
              //brings team to front, must select the path's g parent 
              //to reorder it 
  
      })
      .on("mouseout",function(){
              d3.select("#tooltip").remove();
  
              d3.selectAll("team").selectAll("path")
                .transition()
                .style("stroke",function(d){
                    return color(d.name);  //return all the colors
                 });
  
              d3.selectAll("axis").selectAll("line").style("color","black");
  
      });
  </code></pre>
  
  <p>Please and thank you!</p>