D3.js Fisheye.js étrange comportement mousemove

Question

J'essaie d'utiliser un effet Fisheye.js dans un grand diagramme Tilfold-Reingold (~ 4000 objets). L'effet que je vise est quelque chose comme this example.

Je dois utiliser incorrectement Fisheye.js car mon exemple ne semble pas affecter le nœud ou le texte désiré (du tout).

https://jsfiddle.net/Nyquist212/7b7q9ra9/

Quelqu'un peut-il me dire ce que je fais mal?

svg.on("mousemove", function() { 

fisheye.focus(d3.mouse(this)); 

node.each(function(d) { d.fisheye = fisheye(d); }) 

node.selectAll("circle") 
    .attr("cx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("cy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 10; }); 

node.select("text") 
    .attr("dx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("dy", function(d) { return d.fisheye.y - d.y; }); 

}); 

MISE À JOUR: L'intention est de cibler chaque nœud et le texte de description associé, pour les rendre plus lisibles.

Answer 1

@ Mark - Merci pour le lien vers this post

@ Peter- Merci pour la partie de l'étiquette de texte.

J'ai réussi à le faire fonctionner en combinant les deux.

http://fiddle.jshell.net/Nyquist212/w05nkyry/3/

Answer 2

J'ai joué avec votre violon. J'ai remarqué que la variable svg n'est pas ce que son nom suggère. Et j'ai aussi réussi à augmenter la taille des textes. C'est encore un peu bizarre, mais je pense que c'est plus proche de ton objectif.

d3.select("svg").on("mousemove", function() { //here 

fisheye.focus(d3.mouse(this)); 

node.each(function(d) { d.fisheye = fisheye(d); }) 

node.selectAll("circle") 
    .attr("cx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("cy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("r", function(d) { return d.fisheye.z * 10; }); 

node.select("text") 
    .attr("dx", function(d) { return d.fisheye.x - d.x; }) 
    .attr("dy", function(d) { return d.fisheye.y - d.y; }) 
    .attr("style", function(d){return "font-size :"+d.fisheye.z*10+"px";}); //here 

}); 

https://jsfiddle.net/7b7q9ra9/23/