web-dev-qa-db-fra.com

Afficher le texte du nœud d3 uniquement au survol

J'essaie d'afficher uniquement le texte du nœud lors du survol de la souris. Lorsque je passe la souris sur le nœud, j'ai l'opacité pour le cercle svg qui change, mais seul le texte du premier nœud apparaît. J'ai compris que c'est à cause de la façon dont j'utilise l'élément select, mais je ne peux pas comprendre comment extraire le texte correct pour le nœud sur lequel je passe la souris. Voici ce que j'ai actuellement.

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);
d3.jsmouseovernodes
16
user1855009

Si tu utilises d3.select vous recherchez l'ensemble du DOM pour <text> éléments et en sélectionnant le premier. Pour sélectionner des nœuds de texte spécifiques, vous avez besoin d'un sélecteur plus spécifique (par exemple #textnode1) ou vous devez utiliser une sous-sélection pour contraindre la sélection sous un nœud parent particulier. Par exemple, si le <text> l'élément vécu directement sous le nœud dans votre exemple, vous pouvez utiliser:

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