Selección de ruta dentro del elemento G y cambio de estilo
Básicamente, estoy tratando de que todos los caminos, excepto el que se está pasando por encima, se vuelvan grises, mientras que el que se selecciona mantiene su color original. He podido convertir todas las otras rutas en gris, sin embargo, tengo problemas con la función "select.this" y en realidad accedo a la ruta que quiero cambiar de estilo. Parece que realmente he logrado llegar al elemento de ruta dentro del grupo g, sin embargo, me encuentro con un error en la consola que dice
Uncaught TypeError: Property 'style' of object #<SVGGElement> is not a function
Código relevante:
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");
});
¡Por favor y gracias!