Un arbre pliable dans D3.js

Question

J'apprends actuellement D3.js et je joue un peu avec. Actuellement je travaille sur un arbre, ce qui est plutôt sympa et facile à faire statiquement. Comme j'essaie d'éviter de simplement "copier coller" des exemples qui sont déjà là, et d'essayer de lire les docs, ... eh bien, je fais face à pas mal de 'problèmes', et je ne peux pas semble résoudre celui-ci.

Here's a fiddle d'un arbre simple, petit et pliable. Les liens ne sont pas encore effondrés. Ce serait la prochaine étape et pas pertinent en ce moment.

L'effondrement du noeud racine fonctionne comme prévu. Tous les nœuds enfants disparaissent. Mais en cliquant sur l'un des nœuds du milieu qui n'a qu'un seul enfant, c'est toujours le même enfant qui disparaît ... et je ne vois pas pourquoi.

Click appels click avec le nœud cliqué comme argument. Au sein de click, toggleChildren est appelée, avec le nœud cliqué comme argument à nouveau. Et toggleChildren stocke l'ancien état et fixe les enfants à null ... sur le nœud cliqué ... c'est ce que je pensais au moins ;-)

Answer 1

Lorsque vous avez défini:

var node = baseSvg.selectAll(".node") 
     .data(nodes); 

Ce manquait dans votre data:

 .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

Et, bien sûr, avant var i = 0; ecriture.

Voici le violon: https://fiddle.jshell.net/8ua280wy/