Para expertos: consejos adicionales para el DA

Especificación de vecinos este-oeste

Puede especificar que dos nodos que no están relacionados entre sí deben ser vecinos directos en una dirección perpendicular a la dirección del flujo. En las modalidades de diseño de nivel y radial, los nodos se colocan en el mismo nivel uno junto a otro. En las modalidades de diseño libre y de volcado, los nodos se colocan alineados en el borde norte. Estos nodos se conocen como vecinos este-oeste porque un nodo se coloca como vecino directo al este del otro nodo. El otro nodo pasa a ser el vecino directo al oeste del primer nodo. (Consulte también Utilizar los puntos cardinales para parámetros de diseño posicionales (DA) ).
Técnicamente, los nodos se tratan como padre e hijo, aunque puede que no haya ningún enlace entre ellos. Por lo tanto, uno de los dos nodos puede tener un padre real, pero el otro nodo no porque su padre virtual es su vecino este-oeste.
La característica vecino este-oeste puede utilizarse, por ejemplo, para anotar nodos de un árbol sintáctico de tipos que se produce en una construcción del compilador. En Árbol sintáctico anotado de la sentencia [25] = b[24] + 0.5; se muestra un ejemplo de este tipo de árbol.
Imagen
de diseño de árbol que ilustra el parámetro vecinos
este-oeste
Árbol sintáctico anotado de la sentencia [25] = b[24] + 0.5;
Para especificar que dos nodos son vecinos este-oeste, utilice el método:
treeLayout.setEastWestNeighboring(eastNode, westNode);
También puede utilizar la función siguiente, que es idéntica excepto en el orden del parámetro invertido:
treeLayout.setWestEastNeighboring(westNode, eastNode);
Si la dirección del flujo es hacia abajo, el último método puede ser más fácil de recordar porque, en este caso, el oeste está a la izquierda del este en el diseño, lo que se parece al flujo del texto de los parámetros.
Para obtener el nodo que es el vecino oriental u occidental de un nodo, utilice las llamadas:
var eastNode = treeLayout.getEastNeighbor(westNode);
var westNode = treeLayout.getWestNeighbor(eastNode);
Cada nodo puede tener como máximo un vecino oriental y un vecino occidental porque son vecinos directos. Si se especifica más de un vecino directo, se pasará por alto parcialmente. Las especificaciones cíclicas también pueden provocar conflictos. Por ejemplo, si el nodo B es el vecino oriental del nodo A y el nodo C es el vecino oriental de B, entonces el nodo A no puede ser el vecino oriental de C. (Estrictamente hablando, los ciclos de este tipo pueden ser técnicamente posibles en algunas situaciones en la modalidad de diseño radial, pero no están permitidos en todas las modalidades de diseño).
Si B es el vecino oriental de A, entonces A es automáticamente el vecino occidental de B. El vecino oriental de A puede tener otro vecino oriental. Por lo tanto, puede crear cadenas de vecinos este-oeste, que es una forma habitual de visualizar listas de árboles. En la figura Cadenas de vecinos este-oeste para visualizar listas de árboles se muestran dos ejemplos.
Imagen
de diseños de árbol que ilustra cadenas de vecinos
este-oeste
Cadenas de vecinos este-oeste para visualizar listas de árboles

Recuperación de categorías de enlaces

El algoritmo Diseño de árbol funciona en un árbol de expansión, como se explica en El algoritmo DA . Si el gráfico que se ha de diseñar no es un árbol puro, el algoritmo pasa por alto algunos enlaces. Para tratar estos enlaces de manera especial, puede obtener una lista de enlaces que no son de árbol.
Dado que hay padres y nodos hijo en el árbol de expansión, deben distinguirse las categorías de enlaces siguientes:
  • Un enlace de árbol hacia delante es un enlace que va de un padre a su hijo.
  • Un enlace de árbol hacia atrás es un enlace que va de un hijo a su padre. Si el enlace se traza como una flecha dirigida, ésta apunta en la dirección opuesta a la dirección del flujo.
  • Un enlace que no es de árbol es un enlace entre dos nodos que no están relacionados; ninguno es hijo del otro.
Imagen
que ilustra las distintas categorías de enlaces
Categorías de enlaces
El algoritmo de diseño utiliza estas categorías de enlaces internamente pero no las almacena de forma permanente para ahorrar tiempo y garantizar un uso eficaz de la memoria. Si desea tratar algunas categorías de enlaces de manera especial (por ejemplo, para llamar al Diseño de enlaces en los enlaces que no son de árbol), debe especificar antes de ejecutar el diseño que desea acceder a las categorías de enlaces después de ejecutar el diseño.
Para ello, utilice el método setCategorizingLinks de la siguiente manera:
  treeLayout.setCategorizingLinks(true);
  graph.setNodeLayout(treeLayout);
  graph.performGraphLayout();
  var link;
  var forwardLinks = treeLayout.getCalcForwardTreeLinks();
  console.log("forward links:");
  while(forwardLinks.hasNext()){
   link = forwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var backwardLinks = treeLayout.getCalcBackwardTreeLinks();
  console.log("backward links:");
  while(backwardLinks.hasNext()){
   link = backwardLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
  var nonTreeLinks = treeLayout.getCalcNonTreeLinks();
  console.log("non-tree links:");
  while(nonTreeLinks.hasNext()){
   link = nonTreeLinks.next();
   console.log(link.getStartNode().getLabel() + " -> " + link.getEndNode().getLabel());
  }
Tras haber ejecutado el diseño, puede acceder a las categorías de enlaces.
Los datos de la categoría de enlaces se rellenan cada vez que se llama al diseño, a menos que se llame al método setCategorizingLinks(false).

Secuencias de diseños con cambios incrementales

Puede trabajar con árboles desactualizados, por ejemplo, los que deben ampliarse con más nodos hijo. Si ejecuta un diseño después de una ampliación, es probable que desee identificar las partes que ya se estaban dispuestas en el gráfico original. El algoritmo Diseño de árbol admite estos cambios incrementales en la modalidad incremental porque tiene en cuenta las posiciones anteriores de los nodos. Conserva el orden relativo de los nodos hijo en el diseño posterior.
En la modalidad no incremental, el algoritmo Diseño de árbol calcula el orden de los nodos hijo a partir del orden de los nodos proporcionado por el modelo de gráfico conectado (o gráfico).
En este caso, el diseño es independiente de las posiciones de los nodos antes de ejecutar el diseño. No conserva el orden relativo de los nodos hijo en los diseños posteriores.
La modalidad incremental está habilitada de forma predeterminada.
Para inhabilitar la modalidad incremental:
Llame a:
treeLayout.setIncrementalMode(false);

Edición interactiva

El hecho de que el orden relativo del diseño se conserve es útil durante la edición interactiva. Le permite corregir el diseño con facilidad. Por ejemplo, si el primer diseño coloca un nodo A a la izquierda de su hermano, el nodo B, pero necesita invertir el orden, basta con mover simplemente el nodo A a la derecha del nodo B e iniciar un nuevo diseño para arreglar el dibujo. En el segundo diseño, A sigue estando a la derecha de B y el subárbol de A “sigue” al nodo A.
Tres
imágenes que muestran el efecto de mover un nodo y, a continuación,
volver a ejecutar el diseño
Edición interactiva para conseguir un orden específico de los nodos hijo

Especificación del orden de los nodos hijo

Algunas aplicaciones requieren que los nodos hijo del árbol tengan un orden relativo concreto. Esto significa, por ejemplo, que cuando la dirección del flujo es hacia abajo, algunos nodos hijo se deben colocar a la izquierda de otros nodos hijo.
Se puede conseguir en la modalidad no incremental especificando un comparador de nodos del modo siguiente:
  treeLayout.setNodeComparator(function(node1, node2) {
   // for example: sort nodes by increasing width
   return node1.getBounds().width - node2.getBounds().width;
  });
El comparador especifica el orden definido en la tabla siguiente. Para la alineación regular, se produce un aumento de las coordenadas de los nodos hijo. Para la alineación de volcado, se produce un aumento de la distancia desde el padre. Para las modalidades de globo y radial, la ordenación se produce en el sentido de las agujas del reloj.
Modalidad de diseño Alineación Dirección del flujo Orden
Libre, Nivel, Volcado no es de volcado Abajo de izquierda a derecha
Arriba de izquierda a derecha
Izquierda de arriba abajo
Derecha de arriba abajo
Libre, Nivel, Volcado de volcado Abajo de arriba abajo
Arriba de abajo arriba
Izquierda de derecha a izquierda
Derecha de izquierda a derecha
Radial, Globo cualquiera cualquiera en el sentido de las agujas del reloj