Opções de configuração

Principais opções Pivotick

Pivotick oferece suporte a uma ampla gama de opções para personalizar comportamento, layout, renderização, simulação, UI e interações.

Opção	Tipo	Padrão	Descrição
isDirected	boolean	true	Se for verdade, as arestas serão tratadas conforme as instruções.
callbacks	InterractionCallbacks	{}	Retornos de chamada opcionais para interações do usuário (clique, passe o mouse, arraste, etc.).
layout	LayoutOptions	{}	Configuração do layout do gráfico (forças, árvore, espaçamento, alinhamento).
render	GraphRendererOptions	{}	Personalize opções de renderização, como aparência de nós/bordas
simulation	SimulationOptions	{}	Opções para controlar a simulação física (forças, iterações, etc.).
UI	GraphUI	{}	Opções específicas da UI, como barra lateral, seleção, dicas de ferramentas e controles.
i18n	I18nOptions	{}	O idioma do próprio texto da biblioteca. Consulte Traduzindo a UI.

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)

Retornos de chamada

Pivotick permite que você se conecte às interações do usuário e eventos de simulação por meio da opção callbacks. Você pode fornecer funções para vários eventos gerados pelo usuário ou pelo gráfico.

Mais informações na página Callbacks

Amostras de retorno de chamada:

Retorno de chamada	Parâmetros	Descrição
onNodeClick	(event: PointerEvent, node: Node, element: svg)	Disparado quando um nó é clicado.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	Disparado quando o mouse entra em um nó.
onSimulationTick	()	Disparado em cada tick de simulação (útil para renderização personalizada).

informações

O tipo element é svg somente se a opção render.type == "svg".

Exemplo

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)

Opções de layout

Pivotick suporta múltiplas estratégias de layout para posicionar nós. Você pode configurar o layout através da opção layout.

Opção	Tipo	Padrão	Descrição
type	'force' | 'tree' | 'structured'	'force'	O algoritmo de layout a ser usado. 'force' aplica um layout de força baseado na física. 'tree' organiza os nós em uma estrutura de árvore. 'structured' posiciona e fixa um pequeno gráfico, veja Layout Estruturado.

Opções de layout de árvore

Quando type: 'tree' é selecionado, você pode escolher a direção da árvore e, opcionalmente, organizar seus nós em um layout radial.

Opção	Tipo	Padrão	Descrição
horizontal	boolean	false	Organize os nós horizontalmente em vez de verticalmente.
radial	boolean	false	Coloque os nós em um layout radial em vez de vertical.

Exemplo

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

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

Opções de renderização

Pivotick permite personalizar como nós, arestas e rótulos são exibidos e configurar interações da janela de visualização, como zoom e seleção múltipla, usando a opção render.

Opção	Tipo	Padrão	Descrição
renderNode	(node: Node) => HTMLElement | string | void	undefined	Renderizador personalizado para nós.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Estilo padrão aplicado a todos os nós.
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Função para acessar o tipo de nó, usada com nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Mapeia tipos de nós (de nodeTypeAccessor) para estilos.
minLabelFontSize	number	9	Tamanho da fonte renderizada, em CSS pixels, abaixo da qual um rótulo não é desenhado. 0 desenha-os a cada zoom.
zoomEnabled	boolean	true	Ative o zoom.
dragEnabled	boolean	true	Habilite arrastar nós.

Tipo de renderização

dica

Pivotick oferece controle flexível sobre a renderização, desde padrões simples até renderização totalmente personalizada. Aqui está um rápido resumo:

• defaultNodeStyle, defaultEdgeStyle e defaultLabelStyle definem a aparência base de todos os elementos.
• nodeTypeAccessor + nodeStyleMap permitem estilo dinâmico com base no tipo de cada elemento.
• renderNode e renderLabel permitem personalizar totalmente como os nós e rótulos são desenhados (você pode retornar HTML ou texto).

Os próximos três exemplos de renderização usam os seguintes dados:

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

Opções de simulação

As opções de Simulação controlam o comportamento físico e de layout de nós e arestas para o mecanismo de simulação de gráfico.

Verifique a documentação oficial D3-force para saber mais.

Na maioria das vezes, não há necessidade de modificar essas opções: por padrão, Pivotick ajusta o próprio layout a partir do número de nós, seu tamanho e da tela, e continua ajustando conforme o gráfico muda. Definir qualquer opção de força desativa esse gráfico e mantém seu valor - ou defina simulation.physics como 'auto' / 'manual' para ser explícito.

Opções da interface

Pivotick fornece uma camada de UI flexível na parte superior do seu gráfico, permitindo controlar como os usuários interagem com nós, bordas e tela. Usando as opções UI, você pode:

• Configure o mode geral da UI (completo, visualizador, estático, etc.).
• Personalize barra lateral e painéis para mostrar propriedades ou informações extras.
• Defina tooltips para nós e arestas, com renderizadores personalizados opcionais.
• Configure menus de contexto para nós, arestas e tela.
• Desligue qualquer recurso que sua integração não tenha utilidade.

Modo UI

A opção mode controla o comportamento geral e o nível de interação da IU do gráfico.

• full padrão: UI completa com todos os painéis, menus e interações habilitados.
• light: UI mínima com interações essenciais habilitadas.
• viewer: Permite apenas navegar no gráfico (panorâmica, zoom, arrastar) sem exibir nenhum painel da UI.
• static: Gráfico estático, sem painéis de UI ou interações; o gráfico é somente leitura.

Para uso de estilo de imagem de Pivotick, use o seguinte:

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