Comment puis-je prévenir la méthode Javascript InfoVis SpaceTree `ST.select ()` de noeuds effondrement?

Question

J'utilise le JavaScript InfoVis Toolkit et en particulier le SpaceTree visualisation.

Je dois développer tout de l'arbre, puis montrer un chemin d'un retour de nœud feuille particulière à la racine.

J'ai l'arbre pour développer très bien, mais il est la sélection d'un nœud feuille et mettant en évidence le dos de chemin vers la racine qui me cause des problèmes.

J'utilise la fonction ST.select(node, onComplete) pour sélectionner le nœud feuille que je suis intéressé et bien le chemin du retour à la racine (lignes et nœuds) sont mises en évidence.

Pour ce faire, je mis en œuvre les méthodes de onBeforePlotNode et onBeforePlotLine ST.Controller pour me permettre de mettre en évidence les nœuds revenir à la racine et leurs plotlines:

onBeforePlotNode: function(node){  
  //add some color to the nodes in the path between the  
  //root node and the selected node.  
  if (node.selected) {  
    node.data.$color = "#dddddd";  
  } else {  
    delete node.data.$color;  
  }  
},
onBeforePlotLine: function(adj){
  if (adj.nodeFrom.selected && adj.nodeTo.selected) {
    adj.data.$color = "#33CC33";
    adj.data.$lineWidth = 5;
  } else {
    delete adj.data.$color;
    delete adj.data.$lineWidth;
  }
}

Le problème est que quand je l'appelle ST.select() pour mettre en évidence le nœud feuille tous les nœuds enfants sous ce niveau sont effondrés / cachés.

Pour voir en action, je l'ai téléchargé quelques exemples:

  

extension pleine arbre - feuille non sélectionnée
   feuille sélectionnée - chemin montré, mais tous les enfants noeud N2 manquant

Vous devrez peut-défiler vers le bas si la fenêtre de votre navigateur est un petit peu.

Alors, ma question est, comment puis-je montrer des noeuds d'un retour de nœud feuille au nœud racine en JavaScript InfoVis sans enfants de niveau 3 effondrement (niveau 1 étant la racine)?

S'il y avait un moyen de trouver mon noeud leafe et marcher le dos de l'arbre à la racine (définir des styles sur le chemin), alors je serais Happing faire que

Answer 1

OK après avoir creusé à travers tout ce code, qui encombrent avec console.log () des appels et des points d'arrêt, je l'ai trouvé.

Il doit faire avec l'appel inital de onClick, le fait que le graphique comme une boucle de mise à jour qui est en cours d'exécution en arrière-plan et le fait que tout d'ailleurs onClick semble ignorer l'état busy du graphique.

Qu'est-ce qui se passe

1. onClick est appelé et déclenche une chaîne d'événements, une partie d'entre eux est asynchrone
2. select est appelé ce qui est plus ou moins synchrone et fait son travail
3. onClick obtient finalement fait et l'un de ses effets secondaires est qu'il re-développe le graphique
4. select a clickedNode ensemble et maintenant onClick utilise la nouvelle valeur de jeu et plisse

Solution

Nous devons repenser select il respecte l'état occupé du graphe:

select: function(id, onComplete) {
    var that = this;
    if (this.busy) {
        window.setTimeout(function() {
            that.select(id, onComplete);

        }, 1);
        return;
    }
    // original select code follows here (remove the old var that = this; assignment)

C'est tout, nous vérifions simplement l'état occupé et sélectionnez délai jusqu'à ce qu'il false. Cela devrait également être appliquée à toutes les autres fonctions en plus onClick que l'on appelle de l'extérieur, le concepteur bibliothèque ici fait un mauvais travail d'indiquer ce qui a des effets secondaires et ce qui n'a pas bien.

Answer 2

Avez-vous essayé réglage « contraint: false » dans les propriétés de ST? Cela a résolu le problème pour moi.

http://thejit.org/static/v20/ docs / fichiers / visualisations / Spacetree-js.html