Interfaz: NodeStyle

Definido en: interfaces/RendererOptions.ts:468

Propiedades

badges?

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

Definido en: interfaces/RendererOptions.ts:585

Pequeños indicadores fijados al borde del nodo, independientes de todos los demás canales. ver NodeBadge.

Resuelto como cualquier otro canal: la declaración más estrecha gana de plano en lugar de fusionándose, por lo que el propio badges reemplaza lo que sea nodeStyleMap o defaultNodeStyle lo dio. Una matriz vacía es la forma de decir "este no lleva nada"; undefined no muestra ningún grupo de insignias.

Cuatro caben en un nodo simple, dos en uno con niños (la capacidad de expansión reserva el Esquinas este). Todo lo que vaya más allá de eso se colapsa en una insignia +n que nombra al resto.

color

color: string | (node) => string

Definido en: interfaces/RendererOptions.ts:478

El color principal del nodo.

Predeterminado

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

focusTier?

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

Definido en: interfaces/RendererOptions.ts:615

El dibujo utilizado mientras se coloca el cursor sobre este nodo o se selecciona por sí solo, cualquiera que sea el zoom. Aquí es donde un nodo dice todo sobre sí mismo.

Se fusiona sobre el estilo base resuelto en lugar de sobre el nivel activo, por lo que un chip Los niveles shape o html no pueden filtrarse y mantienen un tamaño constante en la pantalla. por mucho que se aleje el gráfico. Nunca cambia la geometría del nodo: los bordes se mantienen aterrizando en el nivel de debajo y nada se mueve.

Cuando se dispara es GraphRendererOptions.focusTierTrigger decir.

focusTierYieldsAt?

optional focusTierYieldsAt: number

Definido en: interfaces/RendererOptions.ts:630

El índice en niveles a partir del cual focusTier deja de dispararse. Mientras que el nodo se dibuja en ese nivel o en uno más rico, pase el cursor y una selección solitaria déjelo como está, para un dibujo de enfoque que el nivel de zoom ya muestra. Desarmado, el foco se dispara en cada nivel. Ignorado en un nodo sin tiers.

Ejemplo

// 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 en: interfaces/RendererOptions.ts:486

Predeterminado

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

html()?

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

Definido en: interfaces/RendererOptions.ts:572

El html que se utilizará dentro del nodo como elemento SVGForeignObject.

Resuelto como cualquier otro canal, por lo que se puede declarar una tarjeta en cualquier nivel. nodeStyleMap[type].html le da una tarjeta a un tipo de nodo mientras que el resto mantiene su formas, y el estilo propio de un solo nodo lo anula. Devolver nada atrae no tarjeta, por lo que una devolución de llamada puede cardar algunos nodos y dejar los demás en paz.

Combínelo con shape: 'none' para obtener una tarjeta que es el nodo. De lo contrario la forma es todavía está dibujado detrás de él, y size es el más pequeño que puede ser el nodo.

La tarjeta se mide y el nodo crece hasta ella, por lo que nunca se recorta y los bordes aterrizan en su frontera. No es necesario que el elemento devuelto tenga un tamaño propio: es medido dentro de una caja que se contrae para ajustar, por lo que width: 100% se resuelve contra su propio contenido en lugar de contra el marcador de posición.

Solo HTML de confianza. Lo que devuelva se inserta tal cual, así que constrúyalo con textContent (o escapar de él) en lugar de interpolar datos de nodo en una cadena de marcado.

Parámetros

node

Node

Devoluciones

string | void | HTMLElement

iconClass?

optional iconClass: string

Definido en: interfaces/RendererOptions.ts:530

iconUnicode?

optional iconUnicode: string

Definido en: interfaces/RendererOptions.ts:531

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

Definido en: interfaces/RendererOptions.ts:548

Cómo se asienta una imagen imagePath en la forma del nodo. Resoluble por nodo, por lo que diferentes nodos pueden mezclar modos (por ejemplo, capturas de pantalla 'cover', otros archivos adjuntos 'icon').

Predeterminado

'icon'

imagePath?

optional imagePath: string

Definido en: interfaces/RendererOptions.ts:542

URL de una imagen para dibujar en el nodo. Restringido a http:, https:, data: y blob: esquemas; todo lo demás se ignora. Al renderizarlo se obtiene la URL.

layoutSize?

optional layoutSize: number

Definido en: interfaces/RendererOptions.ts:641

La mitad del ancho del cuadro que este nodo se reserva para sí mismo en el diseño, en unidades de gráfico. Este es el único tamaño que ve la simulación: configúrelo y el dibujo ya no funcionará. el radio de colisión, por lo que un nodo puede cambiar la forma en que se dibuja sin mover nada.

Déjelo sin configurar y el dibujo será dueño del espaciado, como siempre lo ha sido: una forma se espacia por es size, una tarjeta HTML por lo que mide.

Predeterminado

la mitad del nivel declarado más amplio width, o no configurado cuando no hay niveles

shape

shape: (node) => NodeShape | NodeShape

Definido en: interfaces/RendererOptions.ts:473

La forma del nodo, ya sea una forma estándar o una ruta SVG personalizada

Predeterminado

circle

size

size: number | (node) => number

Definido en: interfaces/RendererOptions.ts:480

Predeterminado

strokeColor

strokeColor: string | (node) => string

Definido en: interfaces/RendererOptions.ts:482

Predeterminado

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

strokeWidth

strokeWidth: string | number

Definido en: interfaces/RendererOptions.ts:484

Predeterminado

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

styleCb()?

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

Definido en: interfaces/RendererOptions.ts:653

Devolución de llamada para anular dinámicamente las propiedades de estilo según el nodo.

Su ubicación depende del bloque de estilo que lo declare. En un propio del nodo estilo, gana rotundamente y nodeStyleMap se omite por completo. encendido render.defaultNodeStyle es la forma calculada del espacio predeterminado: se llena solo lo que ni el nodo ni nodeStyleMap establecen (y qué por nodo styleCb queda fuera), y su resultado aún pierde para ambos.

Se ejecuta una vez por nodo por renderizado, así que manténgalo económico.

Parámetros

node

Node

Devoluciones

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

Definido en: interfaces/RendererOptions.ts:537

Marcado SVG en línea dibujado dentro del nodo. Sanitizado antes de que llegue al DOM (scripting y los controladores de eventos se eliminan), pero todavía se recupera un control remoto <image href> dentro cuando el nodo se procesa, consulte la guía de seguridad.

text?

optional text: string | (node) => string

Definido en: interfaces/RendererOptions.ts:552

El texto que se utilizará dentro del nodo como elemento SVGText

textAnchorPosition

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

Definido en: interfaces/RendererOptions.ts:490

Predeterminado

'middle'

textColor

textColor: string | (node) => string

Definido en: interfaces/RendererOptions.ts:488

Predeterminado

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

textFontSize?

optional textFontSize: number | (node) => number

Definido en: interfaces/RendererOptions.ts:529

Tamaño de fuente de la etiqueta del nodo, en unidades del gráfico (CSS píxeles con zoom 1). la etiqueta El desplazamiento, su presupuesto de caracteres incorporado y la puerta de zoom lo siguen.

Predeterminado

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

textHorizontalShift

textHorizontalShift: number | (node) => number

Definido en: interfaces/RendererOptions.ts:497

El desplazamiento horizontal aplicado a la posición de la etiqueta del nodo. Un valor de 0 significa que está centrado en el nodo, un valor de 1 está al este del nodo y -1 está al oeste del nodo. También se aceptan otros valores, por ejemplo, 0,5 estaría a medio camino entre el centro y el este del nodo.

Predeterminado

textMaxWidth?

optional textMaxWidth: number | (node) => number

Definido en: interfaces/RendererOptions.ts:523

Se puede dibujar la etiqueta más ancha de un nodo, en unidades de gráfico (CSS píxeles con zoom 1). Una etiqueta más larga se acorta con una elipsis media para ajustarse. Reemplaza el presupuesto incorporado, que tiene un tamaño al nodo. Se ignora cuando textTruncate es false.

Predeterminado

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

Definido en: interfaces/RendererOptions.ts:510

Grado de rotación aplicado a la etiqueta del nodo. Los valores positivos giran en el sentido de las agujas del reloj, los valores negativos giran en el sentido contrario a las agujas del reloj.

Predeterminado

textTruncate

textTruncate: boolean | (node) => boolean

Definido en: interfaces/RendererOptions.ts:516

Acorte una etiqueta demasiado ancha con puntos suspensivos en el medio (head…tail); false lo dibuja en su totalidad, en una pastilla temática donde se derrama más allá del nodo.

Predeterminado

true

textVerticalShift

textVerticalShift: number | (node) => number

Definido en: interfaces/RendererOptions.ts:504

El desplazamiento vertical aplicado a la posición de la etiqueta del nodo. Un valor de 0 significa que está centrado en el nodo, un valor de 1 está al norte del nodo y -1 está al sur del nodo. También se aceptan otros valores, por ejemplo, 0,5 estaría a medio camino entre el centro y el norte del nodo.

Predeterminado

tiers?

optional tiers: NodeTier[]

Definido en: interfaces/RendererOptions.ts:603

Dibujos alternativos de este nodo, elegidos según el tamaño que representa actualmente: un glifo en una visión general, un chip etiquetado cuando hay espacio para uno, una tarjeta cuando hay espacio por eso. Ordenó el más pequeño primero; el más rico que encaje gana, y el estilo base es el suelo cuando ninguno lo hace.

La huella del nodo nunca cambia con el dibujo (ver layoutSize), por lo que intercambiar niveles no mueve nada.

Ejemplo

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

Interfaz: NodeStyle ​

Propiedades ​

badges? ​

color ​

Predeterminado ​

focusTier? ​

focusTierYieldsAt? ​

Ejemplo ​

fontFamily ​

Predeterminado ​

html()? ​

Parámetros ​

node ​

Devoluciones ​

iconClass? ​

iconUnicode? ​

imageFit? ​

Predeterminado ​

imagePath? ​

layoutSize? ​

Predeterminado ​

shape ​

Predeterminado ​

size ​

Predeterminado ​

strokeColor ​

Predeterminado ​

strokeWidth ​

Predeterminado ​

styleCb()? ​

Parámetros ​

node ​

Devoluciones ​

svgIcon? ​

text? ​

textAnchorPosition ​

Predeterminado ​

textColor ​

Predeterminado ​

textFontSize? ​

Predeterminado ​

textHorizontalShift ​

Predeterminado ​

textMaxWidth? ​

Predeterminado ​

textRotateDegree ​

Predeterminado ​

textTruncate ​

Predeterminado ​

textVerticalShift ​

Predeterminado ​

tiers? ​

Ejemplo ​

Interfaz: NodeStyle

Propiedades

badges?

color

Predeterminado

focusTier?

focusTierYieldsAt?

Ejemplo

fontFamily

Predeterminado

html()?

Parámetros

node

Devoluciones

iconClass?

iconUnicode?

imageFit?

Predeterminado

imagePath?

layoutSize?

Predeterminado

shape

Predeterminado

size

Predeterminado

strokeColor

Predeterminado

strokeWidth

Predeterminado

styleCb()?

Parámetros

node

Devoluciones

svgIcon?

text?

textAnchorPosition

Predeterminado

textColor

Predeterminado

textFontSize?

Predeterminado

textHorizontalShift

Predeterminado

textMaxWidth?

Predeterminado

textRotateDegree

Predeterminado

textTruncate

Predeterminado

textVerticalShift

Predeterminado

tiers?

Ejemplo