Montrer d3 nœud de texte uniquement sur le vol stationnaire

J'essaie de ne montrer que le nœud de texte à la souris. Quand j'ai passer la souris sur le nœud, j'ai l'opacité pour le svg cercle de changer, mais seulement le texte pour le premier noeud. J'ai compris que c'est parce que de la façon dont je suis l'aide de l'élément select, mais je ne peux pas comprendre comment tirer le bon texte pour le nœud que je suis planant. 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);
Vous pouvez aussi tout simplement avoir une seule zone de texte, et de le déplacer vers l'emplacement correct lorsque vous déplacez la souris sur les points.

OriginalL'auteur user1855009 | 2013-08-07

  1. 31

    Si vous utilisez d3.select vous êtes à la recherche de la totalité du DOM pour <text> éléments et en sélectionnant la première. Pour sélectionner des nœuds de texte, vous avez besoin d'un plus spécifiques sélecteur (par exemple #textnode1) ou vous avez besoin d'utiliser une sous-sélection pour contraindre la sélection en vertu d'un nœud parent. Par exemple, si le <text> élément vécu directement sous le nœud dans votre exemple, vous pourriez utiliser:

    .on('mouseover', function(d){
    var nodeSelection = d3.select(this).style({opacity:'0.8'});
    nodeSelection.select("text").style({opacity:'1.0'});
})
    L'élément de texte a vécu sous le nœud lui-même, si j'étais capable de le faire fonctionner en utilisant le code que vous avez fourni pour mouseover et mouseout du nœud lui-même.

    OriginalL'auteur Scott Cameron