Wie verhindere ich die Javascript InfoVis SpaceTree `ST.select ()` Methode von Knoten kollabiert?

Question

Ich bin das JavaScript InfoVis Toolkit und insbesondere die SpaceTree Visualisierung.

Ich brauche alle den Baum zu erweitern und zeigen dann einen Pfad von einem bestimmten Blattknoten zurück an die Wurzel.

Ich habe den Baum bekam einfach gut zu erweitern, aber es ist die Auswahl eines Blattknotens und markiert den Weg zurück in die Wurzel, die mir einige Probleme verursacht.

Ich bin mit der ST.select(node, onComplete) Funktion des Blattknoten Ich habe Interesse an und in der Tat des Weg zurück an die Wurzel (Linien und Knoten) hervorgehoben wählen.

das ich tun, um die onBeforePlotNode und onBeforePlotLine ST.Controller Methoden implementiert, mir zu erlauben, die die Knoten zurück in die Wurzel und ihre Handlungsstränge zu markieren:

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;
  }
}

Das Problem ist, dass, wenn ich ST.select() rufen Sie den Blattknoten alle untergeordneten Knoten unterhalb dieser Ebene hervorzuheben sind kollabiert / versteckt.

Um dies zu sehen in Aktion, die ich ein paar Beispiele hochgeladen haben:

  

Vollbaum Expansion - Blatt nicht ausgewählt
   Blatt ausgewählt - Pfad gezeigt, aber alle Kinder unter dem Knoten N2 fehlen

Sie können blättern müssen nach unten, wenn Ihr Browser-Fenster ist ein bisschen klein.

Also meine Frage ist, wie mache ich Knoten von einem Blattknoten zurück zum Wurzelknoten in JavaScript InfoVis ohne Stufe 3 Kinder kollabieren (Stufe 1 die Wurzel ist)?

Wenn es eine Möglichkeit, meine leafe Knoten zu finden und zu Fuß den Baum zurück zur Wurzel (Stile auf dem Weg Einstellung), dann würde ich das

werden happing tun

Answer 1

OK, nachdem sie durch alle, dass Code zu graben, es mit console.log unübersichtlich () Anrufe und Haltepunkte, fand ich es.

Es hat mit dem inital onClick Anruf zu tun, die Tatsache, dass der Graph als Update-Schleife, die im Hintergrund und die Tatsache, läuft, dass alles außer onClick scheint den busy Zustand des Graphen zu ignorieren.

Was passiert,

1. onClick wird aufgerufen und löst eine Kette von Ereignissen, ein Teil von ihnen ist asynchron
2. select genannt wird, die mehr oder weniger synchron ist und seine Arbeit
3. onClick wird endlich fertig und eine seiner Nebenwirkungen ist, dass es wieder erweitert der Graph
4. select hat Satz clickedNode und jetzt onClick verwendet den neu eingestellten Wert davon und Schrauben bis

Lösung

Wir brauchen select neu zu gestalten, so dass es den Belegtzustand des Graphen respektiert:

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)

Das ist alles, wir einfach überprüfen für den Belegtzustand und Verzögerung wählen, bis es false. Dies sollte auch für alle andere Funktion neben onClick angewandt werden, die von außen genannt werden, die Bibliothek Designer hier haben eine schlechte Arbeit des angibt, was Nebenwirkungen hat und was nicht though.

Answer 2

Haben Sie versucht, Einstellung "eingeschränkt: false" in ST Eigenschaften? Das löste es für mich.

http://thejit.org/static/v20/ Docs / files / Visualizations / Spacetree-js.html