Come posso evitare l') `metodo dal collasso nodi (Javascript InfoVis SpaceTree` ST.select?

Question

sto usando il JavaScript InfoVis Toolkit e in particolare la SpaceTree di visualizzazione.

devo ampliare tutto l'albero e poi mostrare un percorso da un particolare nodo foglia fino alla radice.

Ho la struttura per espandere bene, ma è la selezione di un nodo foglia ed evidenziando la parte posteriore percorso alla radice che mi sta causando alcuni problemi.

Sto utilizzando la funzione ST.select(node, onComplete) per selezionare il nodo foglia mi interessa e infatti la schiena percorso della radice (linee e nodi) sono evidenziati.

Per fare questo ho implementato i metodi onBeforePlotNode e onBeforePlotLine ST.Controller per permettermi di evidenziare i nodi di nuovo alla radice e le loro trame:

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

Il problema è che quando chiamo ST.select() per evidenziare il nodo foglia tutti i nodi figlio sotto questo livello sono crollati / nascoste.

Per vedere questo in azione Ho caricato un paio di esempi:

  

albero piena espansione - foglia non selezionata
   Leaf selezionato - percorso mostrato, ma tutti i bambini al di sotto del nodo N2 manca

Potrebbe essere necessario scorrere verso il basso se la finestra del browser è un po 'piccolo.

Quindi la mia domanda è: come faccio a visualizzare i nodi da un nodo foglia di nuovo al nodo radice in JavaScript InfoVis senza crollare i bambini di Level 3 (livello 1 è il principale)?

Se ci fosse un modo per trovare il mio nodo leafe e camminare sul retro albero alla radice (impostazione stili sulla strada) allora sarei Happing farlo

Answer 1

OK dopo aver scavato attraverso tutto ciò che il codice, ingombrare con console.log () chiamate e punti di interruzione, l'ho trovato.

Ha a che fare con la chiamata onClick inital, il fatto che il grafico come un loop di aggiornamento che è in esecuzione in background e il fatto che tutto oltre onClick sembra ignorare lo stato busy del grafico.

Che cosa succede

1. onClick viene chiamato e innesca una catena di eventi, parte di essi è asincrona
2. select è chiamata che è più o meno sincrono e fa il suo lavoro
3. onClick finalmente viene fatto e uno dei suoi effetti collaterali è che ri-espande il grafico
4. select ha impostato clickedNode e ora onClick utilizza il valore appena impostato di esso e viti up

Soluzione

Abbiamo bisogno di ridisegnare select modo che rispetta lo stato di occupato del grafico:

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)

Questo è tutto, abbiamo semplicemente controlliamo per lo stato occupato e ritardo di selezionare fino a quando è false. Questo dovrebbe essere applicato anche a tutti altra funzione oltre onClick che sono chiamati dall'esterno, il designer biblioteca qui ha fatto un cattivo lavoro di indicare ciò che ha effetti collaterali e che cosa non ha però.

Answer 2

Hai provato impostazione "vincolato: false" nelle proprietà della ST? Che ha risolto per me.

http://thejit.org/static/v20/ docs / files / Effetti grafici / Spacetree-js.html