Interface: NodeStyle

Definido em: interfaces/RendererOptions.ts:468

Propriedades

badges?

optional badges: (node) => NodeBadge[] | NodeBadge[]

Definido em: interfaces/RendererOptions.ts:585

Pequenos indicadores fixados na borda do nó, independentes de qualquer outro canal — veja NodeBadge.

Resolvido como qualquer outro canal: a declaração mais estreita vence imediatamente em vez de mesclar, portanto, o próprio badges substitui de um nó o que quer que nodeStyleMap ou defaultNodeStyle tenha fornecido. Uma matriz vazia é a maneira de dizer "este não usa nada"; undefined não renderiza nenhum grupo de emblemas.

Quatro cabem em um nó simples, dois em um com filhos (a capacidade de expansão reserva os cantos Leste). Qualquer coisa além disso se transforma em um emblema +n nomeando o resto.

color

color: string | (node) => string

Definido em: interfaces/RendererOptions.ts:478

A cor principal do nó

Padrão

'var(--pvt-node-color, #007acc)'

focusTier?

optional focusTier: Clearable<Omit<Partial<NodeStyle>, "tiers" | "focusTier" | "focusTierYieldsAt" | "layoutSize" | "styleCb">>

Definido em: interfaces/RendererOptions.ts:615

O desenho usado enquanto este nó é pairado ou selecionado por si só — qualquer que seja o zoom. É aqui que um nó diz tudo sobre si mesmo.

Ele se funde sobre o estilo base resolvido em vez de sobre o nível ativo, de modo que shape ou html de um nível de chip não pode vazar para ele e mantém um tamanho constante na tela, independentemente do zoom do gráfico. Isso nunca altera a geometria do nó: as arestas continuam pousando na camada abaixo e nada se move.

Quando dispara, é GraphRendererOptions.focusTierTrigger o que dizer.

focusTierYieldsAt?

optional focusTierYieldsAt: number

Definido em: interfaces/RendererOptions.ts:630

O índice em tiers a partir do qual focusTier para de disparar. Enquanto o nó é desenhado nessa camada ou em uma camada mais rica, passe o mouse e uma seleção solitária para deixá-lo como está, para um desenho de foco que a camada de zoom já mostra. Não definido, o foco é disparado em todas as camadas. Ignorado em um nó sem tiers.

Exemplo

// Hovering the dot shows the chip; once the chip tier is drawn, hovering adds nothing.
tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
focusTier: { shape: 'none', html: chipFor },
focusTierYieldsAt: 0,

fontFamily

fontFamily: string

Definido em: interfaces/RendererOptions.ts:486

Padrão

'var(--pvt-font-family)'

html()?

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

Definido em: interfaces/RendererOptions.ts:572

O html a ser usado dentro do nó como um elemento SVGForeignObject.

Resolvido como qualquer outro canal, portanto, um cartão pode ser declarado em qualquer nível - nodeStyleMap[type].html fornece um cartão a um tipo de nó, enquanto o restante mantém suas formas, e o estilo próprio de um único nó substitui isso. Não retornar nada não atrai nenhum cartão, portanto, um retorno de chamada pode cardar alguns nós e deixar os outros em paz.

Combine-o com shape: 'none' para uma placa que é o nó. Caso contrário, a forma ainda será desenhada atrás dela e size é o menor que o nó pode ter.

O cartão é medido e o nó cresce até ele, para que ele nunca seja cortado e as bordas caiam em sua borda. Você não precisa dimensionar automaticamente o elemento retornado - ele é medido dentro de uma caixa que pode ser reduzida para caber, então width: 100% é resolvido em relação ao seu próprio conteúdo e não no espaço reservado.

Confiável apenas HTML. O que quer que isso retorne é inserido como está, então construa-o com textContent (ou escape dele) em vez de interpolar os dados do nó em uma string de marcação.

Parâmetros

node

Node

Retorno

string | void | HTMLElement

iconClass?

optional iconClass: string

Definido em: interfaces/RendererOptions.ts:530

iconUnicode?

optional iconUnicode: string

Definido em: interfaces/RendererOptions.ts:531

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

Definido em: interfaces/RendererOptions.ts:548

Como uma imagem imagePath fica na forma do nó. Resolvível por nó para que diferentes nós possam misturar modos (por exemplo, capturas de tela 'cover', outros anexos 'icon').

Padrão

'icon'

imagePath?

optional imagePath: string

Definido em: interfaces/RendererOptions.ts:542

URL de uma imagem para desenhar no nó. Restrito aos esquemas http:, https:, data: e blob:; qualquer outra coisa é ignorada. Renderizá-lo busca o URL.

layoutSize?

optional layoutSize: number

Definido em: interfaces/RendererOptions.ts:641

A meia largura da caixa que este nó reserva para si no layout, em unidades gráficas. Este é o único tamanho que a simulação vê: defina-o e o desenho não direcionará mais o raio de colisão, para que um nó possa alterar a forma como é desenhado sem mover nada.

Deixe-o sem definição e o desenho possui o espaçamento, como sempre - uma forma espaça por seu size, um cartão HTML por suas medidas.

Padrão

metade do nível declarado mais amplo width, ou não definido quando não há níveis

shape

shape: (node) => NodeShape | NodeShape

Definido em: interfaces/RendererOptions.ts:473

A forma do nó, seja uma forma padrão ou um caminho SVG personalizado

Padrão

circle

size

size: number | (node) => number

Definido em: interfaces/RendererOptions.ts:480

Padrão

strokeColor

strokeColor: string | (node) => string

Definido em: interfaces/RendererOptions.ts:482

Padrão

'var(--pvt-node-stroke, #fff)'

strokeWidth

strokeWidth: string | number

Definido em: interfaces/RendererOptions.ts:484

Padrão

'var(--pvt-node-stroke-width, 2)'

styleCb()?

optional styleCb: (node) => Partial<NodeStyle>

Definido em: interfaces/RendererOptions.ts:653

Retorno de chamada para substituir dinamicamente as propriedades de estilo com base no nó.

Onde ele fica depende de qual bloco de estilo o declara. No estilo do próprio, ele vence imediatamente e nodeStyleMap é totalmente ignorado. Em render.defaultNodeStyle é a forma computada do slot padrão: ele preenche apenas o que nem o nó nem nodeStyleMap definiram (e o que styleCb por nó deixou de fora), e seu resultado ainda perde para ambos.

Executa uma vez por nó por renderização, portanto, mantenha-o barato.

Parâmetros

node

Node

Retorno

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

Definido em: interfaces/RendererOptions.ts:537

Marcação SVG embutida desenhada dentro do nó. Sanitizado antes de chegar ao DOM (scripts e manipuladores de eventos são removidos), mas um <image href> remoto dentro dele ainda é buscado quando o nó é renderizado - consulte o guia de segurança.

text?

optional text: string | (node) => string

Definido em: interfaces/RendererOptions.ts:552

O texto a ser usado dentro do nó como um elemento SVGText

textAnchorPosition

textAnchorPosition: "end" | "start" | "middle"

Definido em: interfaces/RendererOptions.ts:490

Padrão

'middle'

textColor

textColor: string | (node) => string

Definido em: interfaces/RendererOptions.ts:488

Padrão

'var(--pvt-node-text-color, #fff)'

textFontSize?

optional textFontSize: number | (node) => number

Definido em: interfaces/RendererOptions.ts:529

Tamanho da fonte do rótulo do nó, em unidades gráficas (CSS pixels com zoom 1). O deslocamento do rótulo, seu orçamento de caracteres integrado e a porta de zoom o seguem.

Padrão

undefined — derived from the node's size: max(12, size × 0.45)

textHorizontalShift

textHorizontalShift: number | (node) => number

Definido em: interfaces/RendererOptions.ts:497

O deslocamento horizontal aplicado à posição do rótulo do nó. Um valor 0 significa que está centralizado no nó, um valor 1 está a leste do nó, -1 está a oeste do nó. Outros valores também são aceitos, por exemplo, 0,5 estaria no meio do caminho entre o centro e o leste do nó.

Padrão

textMaxWidth?

optional textMaxWidth: number | (node) => number

Definido em: interfaces/RendererOptions.ts:523

O rótulo de nó mais largo pode ser desenhado, em unidades gráficas (CSS pixels com zoom 1). Uma etiqueta mais longa é encurtada com reticências no meio para caber. Substitui o orçamento integrado, que é dimensionado para o nó. Ignorado quando textTruncate é false.

Padrão

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

Definido em: interfaces/RendererOptions.ts:510

Grau de rotação aplicado ao rótulo do nó. Os valores positivos giram no sentido horário, os valores negativos giram no sentido anti-horário.

Padrão

textTruncate

textTruncate: boolean | (node) => boolean

Definido em: interfaces/RendererOptions.ts:516

Encurte um rótulo muito largo com reticências no meio (head…tail); false desenha-o por completo, em uma pílula temática onde ele passa pelo nó.

Padrão

true

textVerticalShift

textVerticalShift: number | (node) => number

Definido em: interfaces/RendererOptions.ts:504

O deslocamento vertical aplicado à posição do rótulo do nó. Um valor 0 significa que está centralizado no nó, um valor 1 está ao norte do nó, -1 está ao sul do nó. Outros valores também são aceitos, por exemplo, 0,5 seria o meio caminho entre o centro e o norte do nó.

Padrão

tiers?

optional tiers: NodeTier[]

Definido em: interfaces/RendererOptions.ts:603

Desenhos alternativos deste nó, escolhidos pelo tamanho que ele renderiza atualmente – um glifo em uma visão geral, um chip rotulado quando houver espaço para um, um cartão quando houver espaço para isso. Pedi o menor primeiro; o mais rico que se encaixa vence, e o estilo base é o chão quando ninguém o faz.

A pegada do nó nunca muda com o desenho (veja layoutSize), então a troca de camadas não move nada.

Exemplo

tiers: [
  { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
  { width: 140, height: 44, style: { shape: 'none', html: chipFor } },
]

Interface: NodeStyle ​

Propriedades ​

badges? ​

color ​

Padrão ​

focusTier? ​

focusTierYieldsAt? ​

Exemplo ​

fontFamily ​

Padrão ​

html()? ​

Parâmetros ​

node ​

Retorno ​

iconClass? ​

iconUnicode? ​

imageFit? ​

Padrão ​

imagePath? ​

layoutSize? ​

Padrão ​

shape ​

Padrão ​

size ​

Padrão ​

strokeColor ​

Padrão ​

strokeWidth ​

Padrão ​

styleCb()? ​

Parâmetros ​

node ​

Retorno ​

svgIcon? ​

text? ​

textAnchorPosition ​

Padrão ​

textColor ​

Padrão ​

textFontSize? ​

Padrão ​

textHorizontalShift ​

Padrão ​

textMaxWidth? ​

Padrão ​

textRotateDegree ​

Padrão ​

textTruncate ​

Padrão ​

textVerticalShift ​

Padrão ​

tiers? ​

Exemplo ​

Interface: NodeStyle

Propriedades

badges?

color

Padrão

focusTier?

focusTierYieldsAt?

Exemplo

fontFamily

Padrão

html()?

Parâmetros

node

Retorno

iconClass?

iconUnicode?

imageFit?

Padrão

imagePath?

layoutSize?

Padrão

shape

Padrão

size

Padrão

strokeColor

Padrão

strokeWidth

Padrão

styleCb()?

Parâmetros

node

Retorno

svgIcon?

text?

textAnchorPosition

Padrão

textColor

Padrão

textFontSize?

Padrão

textHorizontalShift

Padrão

textMaxWidth?

Padrão

textRotateDegree

Padrão

textTruncate

Padrão

textVerticalShift

Padrão

tiers?

Exemplo