Como faço para impedir que o método JavaScript Infovis SpaceTree `St.Select ()` em colapso?

Question

Estou usando o Javascript Infovis Toolkit e, em particular, o Espaçador visualização.

Preciso expandir toda a árvore e depois mostrar um caminho de um nó folhedor específico de volta à raiz.

Eu tenho a árvore para expandir muito bem, mas é a seleção de um nó foliar e destacando o caminho de volta à raiz que está me causando alguns problemas.

Estou usando o ST.select(node, onComplete) Função para selecionar o nó foliar em que estou interessado e, de fato, o caminho de volta à raiz (linhas e nós) é destacado.

Para fazer isso, implementei o onBeforePlotNode e onBeforePlotLine ST.Controller Métodos para me permitir destacar os nós de volta à raiz e suas 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;
  }
}

O problema é que quando eu ligo ST.select() Para destacar o nó da folha, todos os nós filhos abaixo desse nível são colapsados/ocultos.

Para ver isso em ação, enviei alguns exemplos:

Expansão completa de árvores - folha não selecionada
Folha selecionada - caminho mostrado, mas todas as crianças abaixo do nó n2 ausentes

Pode ser necessário rolar para baixo se a janela do seu navegador for um pouco pequena.

Então, minha pergunta é: como faço para mostrar nós de um nó foliar de volta ao nó da raiz no JavaScript Infovis sem desmoronar os filhos do nível 3 (o nível 1 é a raiz)?

Se houvesse uma maneira de encontrar meu nó Leafe e caminhar na árvore de volta à raiz (definindo estilos a caminho), então eu estaria feliz fazendo isso

Answer 1

Ok, depois de cavar todo esse código, confundindo -o com console.log () chamadas e pontos de interrupção, eu o encontrei.

Tem a ver com o inital onClick Ligue para o fato de o gráfico um loop de atualização que está em segundo plano e o fato de que tudo além onClick parece ignorar o busy estado do gráfico.

O que acontece

1. onClick é chamado e desencadeia uma cadeia de eventos, parte deles é assíncrona
2. select está sendo chamado, o que é mais ou menos síncrono e faz seu trabalho
3. onClick finalmente é feito e um dos seus efeitos colaterais é que ele reexpanda o gráfico
4. select definiu clickedNode e agora onClick usa o valor recém -definido e estraga tudo

Solução

Precisamos redesenhar select Por isso, respeita o estado movimentado do gráfico:

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)

Isso é tudo, simplesmente verificamos o estado movimentado e o atraso selecione até que seja false. Isso também deve ser aplicado a todas as outras funções além onClick que são chamados de fora, o designer da biblioteca aqui fez um mau trabalho ao indicar o que tem efeitos colaterais e o que não tem.

Answer 2

Você tentou definir "restrito: false" nas propriedades de ST? Isso resolveu isso para mim.

http://thejit.org/static/v20/docs/files/visualizations/spacetree-js.html