Mostra testo nodo d3 solo al passaggio del mouse

Question

Sto provando a mostrare solo il testo del nodo al passaggio del mouse. Quando passo il mouse sul nodo, ho l'opacità per il cerchio svg che cambia, ma solo il testo per il primo nodo che compare. Ho capito che questo è dovuto al modo in cui utilizzo l'elemento select, ma non riesco a capire come tirare il testo corretto per il nodo su cui sto passando il mouse. Ecco cosa ho attualmente.

node.append("svg:circle") 
    .attr("r", function(d) { return radius_scale(parseInt(d.size)); }) 
    .attr("fill", function(d) { return d.fill; }) 
    .attr("stroke", function(d) { return d.stroke; }) 
    .on('mouseover', function(d){ 
     d3.select(this).style({opacity:'0.8'}) 
     d3.select("text").style({opacity:'1.0'}); 
       }) 
    .on('mouseout', function(d){ 
     d3.select(this).style({opacity:'0.0',}) 
     d3.select("text").style({opacity:'0.0'}); 
    }) 
    .call(force.drag); 

Answer 1

Se si utilizza d3.select si sta cercando l'intera DOM per <text> elementi e selezionando il primo. Per selezionare nodi di testo specifici è necessario un selettore più specifico (ad esempio #textnode1) oppure è necessario utilizzare una sottoselezione per vincolare la selezione in un particolare nodo principale. Ad esempio, se l'elemento <text> vissuto direttamente sotto il nodo nel tuo esempio è possibile utilizzare:

.on('mouseover', function(d){ 
    var nodeSelection = d3.select(this).style({opacity:'0.8'}); 
    nodeSelection.select("text").style({opacity:'1.0'}); 
})