Aplicación de un diseño de gráficos

IBM® ILOG® Dojo Diagrammer ofrece algoritmos de diseño de gráficos incorporados que permiten transformar el aspecto de los gráficos. El componente Graph tiene métodos para configurar y ejecutar algoritmos de diseño de gráficos que pueden aplicarse al contenido del gráfico.
Utilice la función setNodeLayout para especificar un algoritmo de diseño de gráficos que se ejecuta en el contenido de un gráfico. El algoritmo se representa mediante una de las subclases de la clase ibm_ilog.graphlayout.GraphLayout. Utilice la función performGraphLayout para ejecutar el diseño de gráficos seleccionado en el gráfico.
Para aplicar a un gráfico un diseño dirigido por fuerzas:
  • Utilice el código siguiente:
    dojo.require("ibm_ilog.graphlayout.forcedirected.ForceDirectedLayout");
    ...
             var layout = new ibm_ilog.graphlayout.forcedirected.ForceDirectedLayout();
             graph.setNodeLayout(layout);
             graph.performGraphLayout();
Este es el gráfico resultante tras ejecutar el diseño dirigido por fuerzas:
Gráfico
compuesto por cuatro nodos rectangulares, todos con una etiqueta:
Nodo 1, Nodo 2, Nodo 3, Nodo 4. Nodo 1 está situado a la izquierda,
Nodo 2 en la parte superior, Nodo 3 en la parte inferior y Nodo 4 a
la derecha del gráfico.
Un enlace conecta el borde superior de Nodo 1 con el borde inferior
izquierdo de Nodo 2. Otro enlace conecta el borde inferior de Nodo 1
con el borde superior izquierdo de Nodo 3. Un enlace conecta el borde
inferior derecho de Nodo 2 con el borde superior de Nodo 4. Un enlace
conecta el borde superior derecho de Nodo 3 con el borde inferior de
Nodo 4.
El componente Graph proporciona otros métodos relacionados con el diseño de gráficos:
  • setLinkLayout(layout) especifica un algoritmo de diseño de gráficos para diseñar los enlaces de un gráfico.
  • setAutomaticNodeLayout(true/false) y setAutomaticLinkLayout(true/false) especifican si debe ejecutarse el diseño de gráficos automáticamente siempre que cambie el gráfico, por ejemplo, cuando se mueve un nodo.
  • setNodeLayoutActive(true/false) y setLinkLayoutActive(true/false) activan o desactivan de forma selectiva uno de los algoritmos de diseño de gráficos.
Consulte Presentación del diseño de gráficos para obtener más información sobre los algoritmos de diseño de gráficos disponibles.