Selecionando o caminho no elemento G e alterar o estilo
Essencialmente, estou tentando ter todos os caminhos, exceto o que está passando o mouse sobre cinza, enquanto o selecionado mantém a cor original. Consegui transformar todos os outros caminhos em cinza, mas estou tendo problemas com a função "select.this" e realmente acessando o caminho que quero mudar de estilo. Parece que eu realmente consegui descer para o elemento path dentro do grupo g, no entanto, sou confrontado com um erro no console dizendo
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 e obrigado!