Opciones de configuración

Opciones principales Pivotick

Pivotick admite una amplia gama de opciones para personalizar el comportamiento, el diseño, la representación, la simulación, la interfaz de usuario y las interacciones.

Opción	Tipo	Predeterminado	Descripción
isDirected	boolean	true	Si es verdadero, los bordes se tratan según las instrucciones.
callbacks	InterractionCallbacks	{}	Devoluciones de llamada opcionales para las interacciones del usuario (hacer clic, pasar el cursor, arrastrar, etc.).
layout	LayoutOptions	{}	Configuración para el diseño del gráfico (fuerzas, árbol, espaciado, alineación).
render	GraphRendererOptions	{}	Personalice las opciones de renderizado, como la apariencia del nodo/borde
simulation	SimulationOptions	{}	Opciones para controlar la simulación física (fuerzas, iteraciones, etc.).
UI	GraphUI	{}	Opciones específicas de la interfaz de usuario, como barra lateral, selección, información sobre herramientas y controles.
i18n	I18nOptions	{}	El idioma del texto propio de la biblioteca. Consulte Traducción de la interfaz de usuario.

Uso

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

Devoluciones de llamada

Pivotick le permite conectarse a interacciones de usuario y eventos de simulación a través de la opción callbacks. Puede proporcionar funciones para varios eventos generados por el usuario o el gráfico.

Más información en la página de devoluciones de llamadas

Ejemplos de devolución de llamada:

Devolución de llamada	Parámetros	Descripción
onNodeClick	(event: PointerEvent, node: Node, element: svg)	Se activa cuando se hace clic en un nodo.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	Se dispara cuando el mouse ingresa a un nodo.
onSimulationTick	()	Se activa en cada tick de simulación (útil para renderizado personalizado).

información

El tipo element es svg solo si la opción render.type == "svg".

Ejemplo

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

Opciones de diseño

Pivotick admite múltiples estrategias de diseño para posicionar nodos. Puede configurar el diseño a través de la opción layout.

Opción	Tipo	Predeterminado	Descripción
type	'force' | 'tree' | 'structured'	'force'	El algoritmo de diseño a utilizar. 'force' aplica un diseño de fuerza basado en la física. 'tree' organiza los nodos en una estructura de árbol. 'structured' coloca y fija un pequeño gráfico; consulte Diseño estructurado.

Opciones de diseño de árbol

Cuando se selecciona type: 'tree', puede elegir la dirección del árbol y, opcionalmente, organizar sus nodos en un diseño radial.

Opción	Tipo	Predeterminado	Descripción
horizontal	boolean	false	Organice los nodos horizontalmente en lugar de verticalmente.
radial	boolean	false	Coloque los nodos en un diseño radial en lugar de vertical.

Ejemplo

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

Opciones de renderizado

Pivotick le permite personalizar cómo se muestran los nodos, bordes y etiquetas, y configurar interacciones de la ventana gráfica, como zoom y selección múltiple, usando la opción render.

Opción	Tipo	Predeterminado	Descripción
renderNode	(node: Node) => HTMLElement | string | void	undefined	Representador personalizado para nodos.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Estilo predeterminado aplicado a todos los nodos.
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Función para acceder al tipo de nodo, utilizada con nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Asigna tipos de nodos (desde nodeTypeAccessor) a estilos.
minLabelFontSize	number	9	Tamaño de fuente renderizado, en CSS píxeles, debajo del cual no se dibuja ninguna etiqueta. 0 los dibuja en cada zoom.
zoomEnabled	boolean	true	Habilite el zoom.
dragEnabled	boolean	true	Habilite el arrastre de nodos.

Tipo de renderizado

Consejo

Pivotick le brinda un control flexible sobre la renderización, desde valores predeterminados simples hasta una renderización totalmente personalizada. Aquí hay un resumen rápido:

• defaultNodeStyle, defaultEdgeStyle y defaultLabelStyle definen la apariencia base de todos los elementos.
• nodeTypeAccessor + nodeStyleMap permite un estilo dinámico basado en el tipo de cada elemento.
• renderNode y renderLabel le permiten personalizar completamente cómo se dibujan los nodos y las etiquetas (puede devolver HTML o texto).

Los siguientes tres ejemplos de representación utilizan los siguientes datos:

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

Opciones de simulación

Las opciones de Simulación controlan la física y el comportamiento de diseño de nodos y bordes para el motor de simulación de gráficos.

Consulte la Documentación oficial de D3-force para obtener más información.

La mayoría de las veces no es necesario modificar estas opciones: por defecto Pivotick ajusta el diseño en sí a partir del número de nodos, su tamaño y el lienzo, y continúa ajustándose a medida que cambia el gráfico. Configurar cualquier opción de fuerza opta por ese gráfico y mantiene su valor, o establece simulation.physics en 'auto' / 'manual' para ser explícito.

Opciones de interfaz de usuario

Pivotick proporciona una capa de interfaz de usuario flexible encima de su gráfico, lo que le permite controlar cómo los usuarios interactúan con los nodos, los bordes y el lienzo. Usando las opciones UI, puedes:

• Configure el modo general de la interfaz de usuario (completa, visor, estática, etc.).
• Personalice sidebar y los paneles para mostrar propiedades o información adicional.
• Defina tooltips para nodos y bordes, con renderizadores personalizados opcionales.
• Configure menús contextuales para nodos, bordes y el lienzo.
• Desactiva cualquier característica que tu integración no sirva para nada.

Modo de interfaz de usuario

La opción mode controla el comportamiento general y el nivel de interacción de la interfaz de usuario del gráfico.

• full predeterminado: interfaz de usuario completa con todos los paneles, menús e interacciones habilitados.
• light: interfaz de usuario mínima con interacciones esenciales habilitadas.
• viewer: solo permite navegar por el gráfico (desplazar, hacer zoom, arrastrar) sin mostrar ningún panel de interfaz de usuario.
• static: gráfico estático, sin paneles de interfaz de usuario ni interacciones; el gráfico es de sólo lectura.

Para el uso de estilo de imagen de Pivotick, use lo siguiente:

const options = {
    UI: {  
        mode: 'viewer'
    },
}