Développer/réduire les nœuds enfants de l'arbre dans le d3.js?
Je suis en train de construire une structure en arbre (ou plutôt la modification de l'un des exemples avec un ensemble de données dans mon propre json) et je suis en train de créer certaines fonctionnalités:
Mon arbre de la mise en page est qu'à partir de l'exemple d'arbre:
http://mbostock.github.com/d3/ex/cluster.html
J'ajoute (pour les cercles) un événement onclick qui je voudrais de l'effondrement des enfants de l'cliqué sur le nœud. C'est-à-dire, lorsqu'un utilisateur clique sur le steelblue cercle associé à un nœud, je veux que les nœuds enfants à disparaître.
J'ai parcouru la documentation et je n'ai pas tourné quoi que ce soit qui me permettrait de faire des nœuds de l'effondrement ou de disparaître.
Que pouvais-je faire?
OriginalL'auteur wataraptor | 2012-03-02
Vous devez vous connecter pour publier un commentaire.
Il y a ceci:
http://mbostock.github.com/d3/talk/20111018/tree.html
Il y a un certain nombre d'autres interactive hiérarchique exemples de disposition de mon SVG Ouvrir keynote.
D'accord. Merci, magnifique outil. Je voudrais lui donner un +2 si je le pouvais
merci beaucoup pour le merveilleux de visualisation. La version de votre travail à la bl.ocks.org/mbostock/4339083 peut-être plus facile pour les autres utilisateurs de les adapter
OriginalL'auteur mbostock
Malheureusement, je suis encore en train jusqu'à la vitesse avec D3, et je ne suis pas sûr de la façon de mieux répondre à votre question. Mais Ici, c'est une force dirigée mise en page qui vous permet d'afficher/cacher les nœuds en cliquant sur eux, qui peut vous donner quelques idées: http://bl.ocks.org/1062288
Si vous regardez à travers la source, vous pouvez voir qu'il n'importe pas que c'est une force dirigée mise en page, la même solution pourrait être utilisé pour n'importe quel DAG (c'est à dire, pas de boucles dans le graphe), qui comprend des arbres. Je vais ajouter du code spécifique à une réponse spécifique (dans le cas où le lien finit par rompre).
OriginalL'auteur nkoren
Il ya un couple d'approches, l'une est juste pour une utilisation régulière stying pour masquer le balisage des enfants (opacity: 0, ou display: none). Cependant, ce qui rend les données invisible, l'arbre conserve sa forme, comme si les données sont là, vous ne pouvez pas le voir.
Habituellement, vous aurez envie de l'arbre pour faire semblant de données n'est pas là et mise à jour en conséquence, pour cela, vous pouvez utiliser la même approche que la force dirigée exemple de disposition dans le lien ci-dessus.
Ça se résume à:
1) Utiliser une fonction pour construire l'arbre d3
2) cliquez sur ajouter un événement à l'réductible nœuds
3) L'événement click renomme les enfants de la propriété du nœud et appelle la fonction en 1) qui retrace l'arbre sans que le nœud enfants.
Voici le code à partir du lien dans nkoren réponse ( http://bl.ocks.org/1062288 ):
OriginalL'auteur forforf