pivotick v3.0.0

---

pivotick / RendererOptions / GraphRendererOptions

Interface: GraphRendererOptions

Definido em: interfaces/RendererOptions.ts:10

Propriedades

beforeRender()

beforeRender: (graph) => void

Definido em: interfaces/RendererOptions.ts:289

Callback executado durante a fase inicial, antes da primeira renderização

Parâmetros

graph

Pivotick

A instância do gráfico

Retorno

void

---

defaultEdgeStyle

defaultEdgeStyle: EdgeStyle

Definido em: interfaces/RendererOptions.ts:114

O estilo de borda padrão a ser aplicado em todos os nós

Valor padrão

defaultEdgeStyleValue

---

defaultLabelStyle

defaultLabelStyle: LabelStyle

Definido em: interfaces/RendererOptions.ts:119

O estilo de etiqueta da borda padrão a ser aplicado em todos os nós

Valor padrão

defaultLabelStyleValue

---

defaultNodeStyle

defaultNodeStyle: NodeStyle

Definido em: interfaces/RendererOptions.ts:109

O estilo de nó padrão a ser aplicado em todos os nós

Valor padrão

defaultNodeStyleValue

---

detailTransition?

optional detailTransition: number

Definido em: interfaces/RendererOptions.ts:267

Quanto tempo, em milissegundos, um desenho leva para aparecer ou desaparecer gradualmente do gráfico à medida que o zoom altera o que vale a pena desenhar. 0 faz todas essas alterações em um único quadro, que é o que faz um gráfico que declara nenhuma transição.

Ele cobre uma troca de nó entre seu desenho NodeStyle.tiers, seu desenho NodeStyle.focusTier chegando e saindo, e um cruzamento de rótulo GraphRendererOptions.minLabelFontSize. Um desenho de saída é mantido vivo em uma camada própria e os dois desaparecem um ao lado do outro, de modo que um nó nunca esteja ausente no meio da troca - apenas brevemente mais suave onde eles se sobrepõem.

Cada nó na tela cruza um limite no mesmo momento, então isso inicia tantos fades quanto houver nós mudando. prefers-reduced-motion desliga.

Medido em 210 nós, cada um segurando uma placa de 140x44: o fade em si não custa nada – a tela mantém 60fps em toda a sua extensão – mas manter tantas cartas de saída vivas por um instante adiciona cerca de 26 ms ao quadro que o cruzamento já gasta. Defina-o como 0 em um gráfico onde o quadro é mais importante do que a transição.

Padrão

160

---

dragEnabled

dragEnabled: boolean

Definido em: interfaces/RendererOptions.ts:313

Padrão

true

---

edgeStyleMap?

optional edgeStyleMap: Record<string, Partial<EdgeStyle>>

Definido em: interfaces/RendererOptions.ts:223

Mapeia tipos de borda para seus estilos.

Cada chave é um tipo de borda (conforme retornado por edgeTypeAccessor) e mapeia para um EdgeStyle parcial. O próprio styleCb de uma vantagem ainda vence o mapa, exatamente como acontece com nodeStyleMap.

Observações

Usado em conjunto com edgeTypeAccessor

Exemplo

edgeStyleMap: {
  'object-reference': { strokeColor: '#428bca' },
  'correlation': { strokeColor: '#888', dashed: true },
}

---

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Definido em: interfaces/RendererOptions.ts:204

Função para acessar o tipo de borda - a dimensão edgeStyleMap chaves ativadas, e aquela que uma seção de legenda edge e facetas de filtro de borda derivam de quando não recebem uma chave de dados própria.

Parâmetros

edge

Edge

Retorno

string | undefined

Observações

Usado em conjunto com edgeStyleMap

Exemplo

edgeTypeAccessor: (edge) => edge.getData()?.kind

---

enableFocusMode

enableFocusMode: boolean

Definido em: interfaces/RendererOptions.ts:228

Controla se nós e arestas não conectados ficam esmaecidos quando um nó é selecionado

Padrão

true

---

enableNodeExpansion

enableNodeExpansion: boolean

Definido em: interfaces/RendererOptions.ts:234

Controla se os nós podem ser expandidos ou recolhidos para mostrar seus filhos. false também elimina a divisa, o atalho Enter e o contorno tracejado recolhido.

Padrão

true

---

fitAnchor?

optional fitAnchor: string

Definido em: interfaces/RendererOptions.ts:311

O nó em que um ajuste é mantido em minFitScale é centralizado, por id; o grupo de um nó dobrado representa isso. A visualização para nas bordas do conteúdo, portanto, uma âncora próxima fica perto desse lado da tela. Não definido, ou não desenhado, o ajuste centra-se no conteúdo.

---

focusTierTrigger?

optional focusTierTrigger: "off" | "selection" | "both" | "hover"

Definido em: interfaces/RendererOptions.ts:245

Quando o desenho NodeStyle.focusTier de um nó dispara. O estilo diz qual é o desenho em foco; isso diz quando.

A seleção promove apenas um nó que é selecionado por si só – uma seleção de caixa de cinquenta seria uma parede de cartas sobrepostas. 'off' suprime o comportamento sem editar o estilo, que é o que um integrador que incorpora a predefinição de outra pessoa precisa.

Padrão

'both'

---

groupOutline()?

optional groupOutline: (group) => string | void | HTMLElement

Definido em: interfaces/RendererOptions.ts:173

O que mostra o chip sobre um grupo aberto, no lugar de seu rótulo. Uma string é mostrada como texto. O chip mantém sua marca próxima e ainda dobra o grupo para trás quando clicado. Não devolva nada para manter o rótulo.

Parâmetros

group

GroupInfo

Retorno

string | void | HTMLElement

---

groupStyle()?

optional groupStyle: (group, base) => void | Partial<NodeStyle>

Definido em: interfaces/RendererOptions.ts:167

A aparência de um grupo feito por UI.simplify, sobreposto ao padrão: um disco na cor do tipo dentro de um anel, a contagem no disco quando houver espaço, o rótulo abaixo. Um grupo é desenhado como um nó, então tiers, focusTier, html, shape e badges funcionam como em um. Não retorne nada para manter o padrão.

base é o estilo que a biblioteca desenharia. O que você retorna substitui suas chaves, portanto, para manter a contagem no disco ao adicionar uma camada, espalhe base.tiers.

Parâmetros

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Retorno

void | Partial<NodeStyle>

Exemplos

groupStyle: (group) => group.rule === 'bySource' ? { color: '#6b7280' } : undefined

groupStyle: (group, base) => ({ tiers: [...(base.tiers ?? []), { width: 140, height: 44, style: { html: () => chip(group) } }] })

---

interactionEnabled

interactionEnabled: boolean

Definido em: interfaces/RendererOptions.ts:315

Padrão

true

---

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Definido em: interfaces/RendererOptions.ts:135

Define estilos personalizados para formas de marcadores usadas no gráfico.

Cada chave é um tipo de marcador (por exemplo, 'diamond', 'arrow') e mapeia para um objeto MarkerStyle.

Valor padrão

defaultMarkerStyleMap

Exemplo

markerStyleMap: {
  'diamond': {
    fill: '#44c77f',
  },
}

---

maxZoom

maxZoom: number

Definido em: interfaces/RendererOptions.ts:299

Padrão

10

---

minFitScale?

optional minFitScale: number

Definido em: interfaces/RendererOptions.ts:305

A escala mais baixa para a qual um ajuste diminui o zoom. O conteúdo que precisaria de menos é mostrado nesta escala, centralizado em fitAnchor e ultrapassa as bordas da tela. Indefinido, um ataque sempre mostra tudo. Uma escala explícita passada para fitAndCenter ignora isso.

---

minLabelFontSize?

optional minLabelFontSize: number

Definido em: interfaces/RendererOptions.ts:284

O tamanho da fonte renderizada, em CSS pixels, abaixo do qual um rótulo não é desenhado.

Um rótulo percorre o gráfico e é dimensionado com ele, de modo que, após um certo zoom, é um texto que ninguém consegue ler - e em um gráfico grande o suficiente para ser aberto com menos zoom, todos os rótulos de uma vez. Abaixo desse tamanho a biblioteca não desenha nenhum deles, o que também os tira da passagem que reposiciona um rótulo em cada tick da simulação.

Um número para toda a tela: um rótulo de aresta e um nó semelhante. A diferença entre eles já está no tamanho da fonte, uma vez que o rótulo de um nó é derivado de seu tamanho - um nó grande mantém seu rótulo por mais tempo do que um nó pequeno.

0 desenha todos os rótulos em cada zoom.

Padrão

9

---

minZoom

minZoom: number

Definido em: interfaces/RendererOptions.ts:297

Padrão

0.05

---

nodeStyleMap?

optional nodeStyleMap: Record<string, Partial<NodeStyle>>

Definido em: interfaces/RendererOptions.ts:190

Mapeia tipos de nós para seus estilos.

Cada chave é um tipo de nó (conforme retornado por nodeTypeAccessor) e mapeia para um objeto NodeStyle.

Observações

Usado em conjunto com nodeTypeAccessor

Exemplo

nodeStyleMap: {
  'hub': { shape: 'hexagon', color: '#aaa', size: 30 },
  'spoke': { shape: 'triangle', color: '#f00' },
}

---

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Definido em: interfaces/RendererOptions.ts:148

Função para acessar o tipo de um nó. Usado em

Usado para estilizar nós com base em seu tipo.

Parâmetros

node

Node

Retorno

string | undefined

Observações

Usado em conjunto com nodeStyleMap

Exemplo

nodeTypeAccessor: (node) => node.getData()?.type

---

renderCluster()?

optional renderCluster: (cluster) => string | void | HTMLElement

Definido em: interfaces/RendererOptions.ts:104

Renderizador personalizado para clusters.

Permite controle total sobre como um cluster é exibido. A função pode retornar:

• Um HTMLElement para ser usado como cluster, ou
• Uma string para renderizar dentro do cluster

Parâmetros

cluster

Node

Retorno

string | void | HTMLElement

Exemplo

renderCluster: (cluster: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

renderLabel()?

optional renderLabel: (edge) => string | void | HTMLElement

Definido em: interfaces/RendererOptions.ts:77

Renderizador personalizado para rótulos de borda.

Permite controle total sobre como os rótulos das bordas são exibidos. A função pode retornar:

• Um HTMLElement para ser usado como rótulo da aresta, ou
• Uma string para renderizar dentro do rótulo

Parâmetros

edge

Edge

Retorno

string | void | HTMLElement

Exemplo

renderLabel: (edge: Edge): HTMLElement | string | void => {
  const style = [
    'display:inline-block',
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  const text = edge.getData().label;
  return `<span style="${style}">${text}</span>`;
}

---

renderNode()?

optional renderNode: (node) => string | void | HTMLElement

Definido em: interfaces/RendererOptions.ts:52

Renderizador personalizado para nós.

Permite controle total sobre como um nó é exibido. A função pode retornar:

• Um HTMLElement para ser usado como nó,
• Uma string para renderizar dentro do nó, ou
• nada, para deixar esse nó para o pipeline de estilo normal

Um cartão retornado aqui é o nó: nenhuma forma, ícone, imagem ou rótulo é desenhado atrás dele, e seu tamanho medido orienta o raio de colisão e as âncoras de borda. Em vez disso, não retornar nada para um nó fornece sua entrada, forma e rótulo nodeStyleMap como de costume - portanto, isso pode cardar alguns nós em vez de todos eles.

Para um cartão que combina com o resto da cadeia de estilo, declare NodeStyle.html com shape: 'none'; resolve por tipo ou por nó, onde este é global.

Parâmetros

node

Node

Retorno

string | void | HTMLElement

Exemplo

renderNode: (node: Node): HTMLElement | string | void => {
  const size = 12;
  const style = [
    'display:block',
    `width:${size}px`,
    `height:${size}px`,
    'background-color:#907acc',
    'border: 2px solid #fff',
    'border-radius:50%',
    'opacity: 1',
  ].join(';');

  return `<span style="${style}"></span>`;
}

---

selectionBox

selectionBox: SelectionBox

Definido em: interfaces/RendererOptions.ts:316

---

type

type: RendererType

Definido em: interfaces/RendererOptions.ts:15

Define o método de renderização usado pelo gráfico.

---

zoomAnimation

zoomAnimation: boolean

Definido em: interfaces/RendererOptions.ts:293

Padrão

true

---

zoomAnimationDuration

zoomAnimationDuration: number

Definido em: interfaces/RendererOptions.ts:295

Padrão

300

---

zoomEnabled

zoomEnabled: boolean

Definido em: interfaces/RendererOptions.ts:291

Padrão

true