D3.js Diagramme d'accords – Le texte apparaît / disparaît lorsque survolent un arc

J'essaie d'ajouter une petite fonction au diagramme d'accords créé par Mike Bostock. Quand je roule sur un certain arc, dis le groupe A, je veux un morceau de texte que j'ai placé à droite du diagramme d'accord pour mettre à jour son texte pour expliquer quelques idées particulières au groupe A. Lorsque l'utilisateur déplace son / Sa souris loin de l'arc / accord (de sorte que tous les accords deviennent visibles à nouveau), je veux que le texte remonte à ce qu'il a dit avant (ce qui, dans mon cas, est une brève explication de la façon de comprendre un diagramme d'accord)

Cependant, je ne peux pas modifier le texte ou même disparaître à l'aide des fonctions de l'événement de la souris.

J'ai essayé de copier la fonction de fade à la fin: http://bl.ocks.org/mbostock/4062006 dans un fadeOver et fadeOut et en ajustant les fonctions de l'événement à

 .on("mouseover", fadeOver(.1)) .on("mouseout", fadeOut(1)); 

À l'intérieur de la fonction fadeOver , j'ai essayé de créer un nouveau texte pour montrer lorsque vous roulez sur un arc et que les accords non sélectionnés disparaissent. Une seule ligne ajoutée à la fonction originale fade

• Contrôle de l'affichage des graphiques avec la mise en page de force sans spécifier les coordonnées x / y dans les noeuds
• D3.js – masquer des formes pour créer une section transparente
• Comment puis-je détecter l'intersection des lignes sur un globe géométrique D3?
• D3.js: Accès à la propriété d'objet à l'intérieur d'Array for Creating Line Graph
• Le zoom D3 ne fonctionne pas

 function fadeOver(opacity) { d3.select("#SideText").html("Updated piece of text"); return function(d, i) { svg.selectAll("path.chord") .filter(function(d) { return d.source.index != i && d.target.index != i; }) .transition() .style("stroke-opacity", opacity) .style("fill-opacity", opacity); }; }//fadeOver 

Et j'ai ajouté un code similaire à fadeOut

 function fadeOut(opacity) { d3.select("#SideText").html("Standard text"); return function(d, i) { svg.selectAll("path.chord") .filter(function(d) { return d.source.index != i && d.target.index != i; }) .transition() .style("stroke-opacity", opacity) .style("fill-opacity", opacity); }; }//fadeOut 

Cependant, le texte semble toujours être "Texte standard". Rien ne se produit lorsque je passe sur les accords, le texte ne semble jamais se transformer en «texte mis à jour». Quelqu'un peut-il m'expliquer pourquoi pas et / ou m'aider comment je peux réaliser ce que j'essaie de faire? (Je m'attendais à ce que le texte soit «vide» après le rafraîchissement car je n'ai pas encore invoqué un événement de souris, mais il dit «Texte standard» juste après le rafraîchissement)

Je sais que l'exemple ci-dessus n'est pas encore ce que je veux à la fin, mais peut-être, lorsque je comprends ce qui précède, je peux travailler avec des indices d'accords pour afficher un texte particulier de texte mis à jour

• Focus sur le champ de formulaire après l'animation
• D3.js – Treemap où la valeur des parents est supérieure à la somme de ses enfants
• Comment puis-je exécuter un javascript en tant que script node.js sans DOM?
• D3 séquences Sunburst Animation
• Comment faire disparaître les cercles en fonction de l'entrée du clavier?