pivotick v3.0.0

---

pivotic / RendererOptions / GraphRendererOptions

Interfaz: GraphRendererOptions

Definido en: interfaces/RendererOptions.ts:10

Propiedades

beforeRender()

beforeRender: (graph) => void

Definido en: interfaces/RendererOptions.ts:289

Devolución de llamada ejecutada durante la fase inicial, antes del primer renderizado.

Parámetros

graph

Pivotick

La instancia de Graph

Devoluciones

void

---

defaultEdgeStyle

defaultEdgeStyle: EdgeStyle

Definido en: interfaces/RendererOptions.ts:114

El estilo de borde predeterminado que se aplicará en todos los nodos.

Valor predeterminado

defaultEdgeStyleValue

---

defaultLabelStyle

defaultLabelStyle: LabelStyle

Definido en: interfaces/RendererOptions.ts:119

El estilo de etiqueta del borde predeterminado que se aplicará en todos los nodos

Valor predeterminado

defaultLabelStyleValue

---

defaultNodeStyle

defaultNodeStyle: NodeStyle

Definido en: interfaces/RendererOptions.ts:109

El estilo de nodo predeterminado que se aplicará en todos los nodos.

Valor predeterminado

defaultNodeStyleValue

---

detailTransition?

optional detailTransition: number

Definido en: interfaces/RendererOptions.ts:267

Cuánto tiempo, en milisegundos, tarda un dibujo en aparecer o desaparecer del gráfico a medida que se hace zoom. cambia lo que vale la pena dibujar. 0 realiza cada uno de esos cambios en un solo cuadro, que es lo que hace un gráfico que declara que no hay transición.

Cubre un intercambio de nodos entre sus NodeStyle.tiers, sus NodeStyle.focusTier dibujo de llegada y salida, y una etiqueta de cruce GraphRendererOptions.minLabelFontSize. Un dibujo saliente se mantiene vivo en un capa propia y los dos se desvanecen entre sí, por lo que un nodo nunca está ausente a mitad del intercambio: sólo brevemente más suave donde se superponen.

Cada nodo en la pantalla cruza un umbral al mismo tiempo, por lo que esto inicia tantos se desvanece a medida que cambian los nodos. prefers-reduced-motion lo apaga.

Medido en 210 nodos, cada uno con una tarjeta de 140x44: el desvanecimiento en sí no cuesta nada; El lienzo mantiene 60 fps en toda su longitud, pero mantiene vivas tantas tarjetas salientes por un instante agrega aproximadamente 26 ms al cuadro que ya dura el cruce. Configúrelo en 0 en un gráfico donde ese marco importa más que la transición.

Predeterminado

160

---

dragEnabled

dragEnabled: boolean

Definido en: interfaces/RendererOptions.ts:313

Predeterminado

true

---

edgeStyleMap?

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

Definido en: interfaces/RendererOptions.ts:223

Asigna tipos de bordes a sus estilos.

Cada clave es un tipo de borde (como lo devuelve edgeTypeAccessor) y se asigna a un parcial EdgeStyle. El propio styleCb de una ventaja todavía gana sobre el mapa, exactamente como lo hace sobre nodeStyleMap.

Observaciones

Usado junto con edgeTypeAccessor

Ejemplo

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

---

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Definido en: interfaces/RendererOptions.ts:204

Función para acceder al tipo de borde: la dimensión edgeStyleMap teclas activadas, y se derivan las facetas de la sección de leyenda edge y del filtro de borde desde que no se les proporciona una clave de datos propia.

Parámetros

edge

Edge

Devoluciones

string | undefined

Observaciones

Usado junto con edgeStyleMap

Ejemplo

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

---

enableFocusMode

enableFocusMode: boolean

Definido en: interfaces/RendererOptions.ts:228

Controla si los nodos y bordes no conectados aparecen atenuados cuando se selecciona un nodo

Predeterminado

true

---

enableNodeExpansion

enableNodeExpansion: boolean

Definido en: interfaces/RendererOptions.ts:234

Controla si los nodos se pueden expandir o contraer para mostrar a sus hijos. false también elimina el galón, el atajo Enter y el contorno discontinuo contraído.

Predeterminado

true

---

fitAnchor?

optional fitAnchor: string

Definido en: interfaces/RendererOptions.ts:311

El nodo a fit mantenido en minFitScale se centra en, por id; un grupo de nodos plegados lo sustituye. La vista se detiene en los bordes del contenido, por lo que un ancla cerca de uno se ubica cerca de ese lado del lienzo. Sin fijar o no dibujado, el ajuste se centra en el contenido.

---

focusTierTrigger?

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

Definido en: interfaces/RendererOptions.ts:245

Cuando se activa el dibujo NodeStyle.focusTier de un nodo. El estilo dice cuál es el enfoque. el dibujo es; esto dice cuando.

La selección solo promueve un nodo que se selecciona por sí solo: una selección de cuadro de cincuenta Sería un muro de cartas superpuestas. 'off' suprime el comportamiento sin editar el estilo, que es lo que hace un integrador incorporando las necesidades preestablecidas de otra persona.

Predeterminado

'both'

---

groupOutline()?

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

Definido en: interfaces/RendererOptions.ts:173

Lo que muestra el chip sobre un grupo abierto, en lugar de su etiqueta. Una cadena se muestra como texto. El chip mantiene su marca de cierre y aún dobla el grupo hacia atrás cuando se hace clic. No devolver nada para conservar la etiqueta.

Parámetros

group

GroupInfo

Devoluciones

string | void | HTMLElement

---

groupStyle()?

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

Definido en: interfaces/RendererOptions.ts:167

La apariencia de un grupo creado por UI.simplify, superpuesto al predeterminado: un disco en el el color del tipo dentro de un anillo, la cuenta en el disco una vez que hay espacio, la etiqueta abajo. Un grupo se dibuja como un nodo, entonces tiers, focusTier, html, shape y badges funcionan como lo hacen en uno. No devuelva nada para mantener el valor predeterminado.

base es el estilo que dibujaría la biblioteca. Lo que devuelves reemplaza sus claves, por lo que para mantener la cuenta en el disco mientras agrega un nivel, distribuya base.tiers.

Parámetros

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Devoluciones

void | Partial<NodeStyle>

Ejemplos

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

Predeterminado

true

---

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Definido en: interfaces/RendererOptions.ts:135

Define estilos personalizados para las formas de marcador utilizadas en el gráfico.

Cada clave es un tipo de marcador (por ejemplo, 'diamond', 'arrow') y se asigna a un objeto MarkerStyle.

Valor predeterminado

defaultMarkerStyleMap

Ejemplo

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

---

maxZoom

maxZoom: number

Definido en: interfaces/RendererOptions.ts:299

Predeterminado

10

---

minFitScale?

optional minFitScale: number

Definido en: interfaces/RendererOptions.ts:305

La escala más baja a la que se aleja un ajuste. El contenido que necesitaría menos se muestra en este escala, centrada en fitAnchor, y pasa por los bordes del lienzo. Desarmado, un ajuste siempre muestra todo. Una escala explícita pasada a fitAndCenter lo ignora.

---

minLabelFontSize?

optional minLabelFontSize: number

Definido en: interfaces/RendererOptions.ts:284

El tamaño de fuente renderizado, en CSS píxeles, debajo del cual no se dibuja una etiqueta.

Una etiqueta recorre el gráfico y escala con él, por lo que más allá de cierto zoom no es texto para nadie. puede leer, y en un gráfico lo suficientemente grande como para abrirlo y reducirlo, todas las etiquetas a la vez. Abajo este tamaño la biblioteca no extrae ninguno de ellos, lo que también los saca del pase que reposiciona una etiqueta en cada tick de simulación.

Un número para todo el lienzo: la etiqueta de un borde y la de un nodo por igual. la diferencia entre ellos ya no corresponde al tamaño de fuente, ya que la etiqueta de un nodo se deriva de su tamaño: un nodo grande mantiene su etiqueta por más tiempo que uno pequeño.

0 dibuja cada etiqueta en cada zoom.

Predeterminado

9

---

minZoom

minZoom: number

Definido en: interfaces/RendererOptions.ts:297

Predeterminado

0.05

---

nodeStyleMap?

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

Definido en: interfaces/RendererOptions.ts:190

Asigna tipos de nodos a sus estilos.

Cada clave es un tipo de nodo (devuelto por nodeTypeAccessor) y se asigna a un objeto NodeStyle.

Observaciones

Usado junto con nodeTypeAccessor

Ejemplo

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

---

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Definido en: interfaces/RendererOptions.ts:148

Función para acceder al tipo de un nodo. Utilizado en

Se utiliza para diseñar nodos según su tipo.

Parámetros

node

Node

Devoluciones

string | undefined

Observaciones

Usado junto con nodeStyleMap

Ejemplo

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

---

renderCluster()?

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

Definido en: interfaces/RendererOptions.ts:104

Representador personalizado para clústeres.

Permite un control total sobre cómo se muestra un clúster. La función puede devolver:

• Un HTMLElement que se utilizará como grupo, o
• Una cadena para renderizar dentro del cluster

Parámetros

cluster

Node

Devoluciones

string | void | HTMLElement

Ejemplo

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

Representador personalizado para etiquetas de borde.

Permite un control total sobre cómo se muestran las etiquetas de los bordes. La función puede devolver:

• Un HTMLElement que se utilizará como etiqueta del borde, o
• Una cadena para representar dentro de la etiqueta.

Parámetros

edge

Edge

Devoluciones

string | void | HTMLElement

Ejemplo

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

Representador personalizado para nodos.

Permite un control total sobre cómo se muestra un nodo. La función puede devolver:

• Un HTMLElement que se utilizará como nodo,
• Una cadena para representar dentro del nodo, o
• nada, dejar ese nodo al proceso de estilo normal

Una tarjeta devuelta aquí es el nodo: no se dibuja ninguna forma, icono, imagen o etiqueta detrás de él, y su tamaño medido impulsa el radio de colisión y los anclajes de los bordes. En cambio, no devolver nada para un nodo le da su nodeStyleMap entrada, forma y etiquetar como de costumbre, por lo que esto puede cardar algunos nodos en lugar de todos.

Para una tarjeta que se compone con el resto de la cadena de estilo, declara NodeStyle.html con shape: 'none' en su lugar; se resuelve por tipo o por nodo, donde éste es global.

Parámetros

node

Node

Devoluciones

string | void | HTMLElement

Ejemplo

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

---

type

type: RendererType

Definido en: interfaces/RendererOptions.ts:15

Define el método de representación utilizado por el gráfico.

---

zoomAnimation

zoomAnimation: boolean

Definido en: interfaces/RendererOptions.ts:293

Predeterminado

true

---

zoomAnimationDuration

zoomAnimationDuration: number

Definido en: interfaces/RendererOptions.ts:295

Predeterminado

300

---

zoomEnabled

zoomEnabled: boolean

Definido en: interfaces/RendererOptions.ts:291

Predeterminado

true