¿Cómo puedo evitar la) `método de Javascript InfoVis SpaceTree` ST.select (colapsen los nodos?

Question

Estoy usando el kit de herramientas de JavaScript InfoVis y en particular la SpaceTree visualización.

necesito para expandir todo el árbol y luego mostrar un camino de regreso desde un nodo hoja en particular a la raíz.

Tengo el árbol para expandir muy bien pero es la selección de un nodo hoja y poner de relieve la parte posterior ruta a la raíz que me está causando algunos problemas.

Estoy usando la función ST.select(node, onComplete) para seleccionar el nodo hoja que me interesa y de hecho la parte posterior ruta a la raíz (líneas y nodos) se destacan.

Para ello he implementado los métodos onBeforePlotNode y onBeforePlotLine ST.Controller que me permita poner de relieve los nodos de nuevo a la raíz y sus tramas:

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

El problema es que cuando llamo ST.select() para resaltar el nodo hoja todos los nodos secundarios por debajo de este nivel están colapsados ??/ oculta.

Para ver esto en acción He subido un par de ejemplos:

  

expansión completa del árbol - la hoja no seleccionada
   Leaf selecciona - camino se muestra, pero todos los niños menores de nodo N2 falta

Es posible que tenga que desplazarse hacia abajo si la ventana del navegador es un poco pequeño.

Así que mi pregunta es, ¿cómo puedo mostrar los nodos de un nodo hoja vuelta al nodo raíz en JavaScript InfoVis sin colapsar los niños de nivel 3 (nivel 1 que es la raíz)?

Si había una manera de encontrar mi nodo Leafe y caminar detrás del árbol a la raíz (ajuste de estilos en el camino), entonces estaría haciendo que happing

Answer 1

OK después de excavar a través de todo ese código, que saturan con console.log () las llamadas y los puntos de interrupción, lo encontré.

Tiene que ver con la llamada onClick inicial, el hecho de que la gráfica como un bucle de actualización que se ejecuta en segundo plano y el hecho de que todo además onClick parece ignorar el estado busy de la gráfica.

¿Qué ocurre

1. onClick se llama y desencadena una serie de acontecimientos, una parte de ellos es asíncrona
2. select está siendo llamada, la cual es más o menos sincrónica y hace su trabajo
3. onClick finalmente se hace de ella y uno de los efectos secundarios es que re-expande el gráfico
4. select tiene clickedNode conjunto y ahora onClick utiliza el nuevo valor de la misma y mete la pata

Solución

Tenemos que rediseñar select por lo que respeta a la concurrida estado de la gráfica:

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)

Eso es todo, simplemente chequeamos para el estado de ocupado y el retardo hasta que se seleccione de false. Esto también se debe aplicar a todas las demás funciones, además de onClick que se llama desde el exterior, el diseñador de la biblioteca aquí hizo un mal trabajo de indicar lo que tiene efectos secundarios y lo que no sin embargo.

Answer 2

¿Usted intentó ajuste "constreñida: true" en las propiedades del ST? Eso lo resolvió para mí.

http://thejit.org/static/v20/ docs / archivos / visualizaciones / SpaceTree-js.html