Combien de temps, en millisecondes, un dessin met-il pour apparaître ou disparaître du graphique lorsque le zoom modifie ce qui mérite d'être dessiné. 0 effectue chacun de ces changements dans une seule image, ce que fait un graphique ne déclarant aucune transition.

Il couvre un nœud permutant entre son NodeStyle.tiers, son NodeStyle.focusTier dessin arrivant et partant, et une étiquette traversant GraphRendererOptions.minLabelFontSize. Un dessin sortant est maintenu en vie sur un calque qui lui est propre et les deux s'effacent l'un devant l'autre, de sorte qu'un nœud n'est jamais absent à mi-échange - seulement brièvement plus doux là où ils se chevauchent.

Chaque nœud à l'écran franchit un seuil au même moment, cela déclenche donc autant de fondus qu'il y a de nœuds qui changent. prefers-reduced-motion l'éteint.

Mesuré sur 210 nœuds contenant chacun une carte 140x44 : le fondu lui-même ne coûte rien – la toile contient 60 ips sur toute sa longueur – mais garder en vie autant de cartes sortantes pendant un instant ajoute environ 26 ms à l'image déjà utilisée par la traversée. Réglez-le sur 0 sur un graphique où ce cadre compte plus que la transition.

Valeur par défaut

dragEnabled

dragEnabled: boolean

Défini dans : interfaces/RendererOptions.ts:313

Valeur par défaut

true

edgeStyleMap?

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

Défini dans : interfaces/RendererOptions.ts:223

Mappe les types de bords à leurs styles.

Chaque clé est un type de bord (tel que renvoyé par edgeTypeAccessor) et correspond à un EdgeStyle partiel. Le styleCb d'un bord l'emporte toujours sur la carte, exactement comme il le fait sur nodeStyleMap.

Remarques

Utilisé en conjonction avec edgeTypeAccessor

Exemple

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

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Défini dans : interfaces/RendererOptions.ts:204

Fonction pour accéder au type de bord - les touches de dimension edgeStyleMap activées, et celle dont une section de légende edge et les facettes de filtre de bord dérivent lorsqu'elles ne reçoivent pas leur propre clé de données.

Paramètres

edge

Edge

Renvoie

string | undefined

Remarques

Utilisé en conjonction avec edgeStyleMap

Exemple

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

enableFocusMode

enableFocusMode: boolean

Défini dans : interfaces/RendererOptions.ts:228

Contrôle si les nœuds et les bords non connectés sont grisés lorsqu'un nœud est sélectionné

Valeur par défaut

true

enableNodeExpansion

enableNodeExpansion: boolean

Défini dans : interfaces/RendererOptions.ts:234

Contrôle si les nœuds peuvent être développés ou réduits pour afficher leurs enfants. false supprime également le chevron, le raccourci Enter et le contour réduit en pointillés.

Valeur par défaut

true

fitAnchor?

optional fitAnchor: string

Défini dans : interfaces/RendererOptions.ts:311

Le nœud sur lequel un ajustement est détenu à minFitScale est centré, par identifiant ; le groupe d'un nœud plié le remplace. La vue s'arrête sur les bords du contenu, donc une ancre à proximité se trouve près de ce côté du canevas. Non défini, ou non dessiné, l'ajustement se centre sur le contenu.

focusTierTrigger?

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

Défini dans : interfaces/RendererOptions.ts:245

Lorsque le dessin NodeStyle.focusTier d'un nœud se déclenche. Le style indique quel est le dessin central ; cela dit quand.

La sélection ne fait que promouvoir un nœud sélectionné seul : une sélection de cinquante cases serait un mur de cartes qui se chevauchent. 'off' supprime le comportement sans modifier le style, ce dont a besoin un intégrateur intégrant les préréglages de quelqu'un d'autre.

Valeur par défaut

'both'

groupOutline()?

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

Défini dans : interfaces/RendererOptions.ts:173

Ce que montre la puce sur un groupe ouvert, à la place de son étiquette. Une chaîne est affichée sous forme de texte. La puce conserve sa marque de fermeture et replie toujours le groupe lorsqu'on clique dessus. Ne renvoyez rien pour conserver l'étiquette.

Paramètres

group

GroupInfo

Renvoie

string | void | HTMLElement

groupStyle()?

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

Défini dans : interfaces/RendererOptions.ts:167

L'apparence d'un groupe réalisé par UI.simplify, superposé à la valeur par défaut : un disque de la couleur du type à l'intérieur d'un anneau, le décompte sur le disque une fois qu'il y a de la place, l'étiquette en dessous. Un groupe est dessiné comme un nœud, donc tiers, focusTier, html, shape et badges fonctionnent comme ils le font sur un seul. Ne renvoie rien pour conserver la valeur par défaut.

base est le style que la bibliothèque dessinerait. Ce que vous retournez remplace ses clés, donc pour conserver le décompte sur le disque tout en ajoutant un niveau, étalez base.tiers.

Paramètres

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Renvoie

void | Partial<NodeStyle>

Exemples

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

Défini dans : interfaces/RendererOptions.ts:315

Valeur par défaut

true

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Défini dans : interfaces/RendererOptions.ts:135

Définit des styles personnalisés pour les formes de marqueur utilisées dans le graphique.

Chaque clé est un type de marqueur (par exemple, 'diamond', 'arrow') et correspond à un objet MarkerStyle.

Valeur par défaut

defaultMarkerStyleMap

Exemple

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

maxZoom

maxZoom: number

Défini dans : interfaces/RendererOptions.ts:299

Valeur par défaut

minFitScale?

optional minFitScale: number

Défini dans : interfaces/RendererOptions.ts:305

L'échelle la plus basse vers laquelle un ajustement effectue un zoom arrière. Le contenu qui aurait besoin de moins est affiché à cette échelle, centré sur fitAnchor, et s'étend au-delà des bords du canevas. Lorsqu'il n'est pas défini, un ajustement montre toujours tout. Une échelle explicite passée à fitAndCenter l'ignore.

minLabelFontSize?

optional minLabelFontSize: number

Défini dans : interfaces/RendererOptions.ts:284

La taille de la police rendue, en CSS pixels, en dessous de laquelle aucune étiquette n'est dessinée.

Une étiquette chevauche le graphique et évolue avec lui, donc au-delà d'un certain zoom, c'est du texte que personne ne peut lire - et sur un graphique suffisamment grand pour ouvrir un zoom arrière, chaque étiquette à la fois. En dessous de cette taille, la bibliothèque n'en dessine aucun, ce qui les supprime également de la passe qui repositionne une étiquette à chaque tick de simulation.

Un numéro pour l'ensemble du canevas : l'étiquette d'un bord et celle d'un nœud. La différence entre eux réside déjà dans la taille de la police, puisque l'étiquette d'un nœud est dérivée de sa taille : un gros nœud conserve son étiquette plus longtemps qu'un petit.

0 dessine chaque étiquette à chaque zoom.

Valeur par défaut

minZoom

minZoom: number

Défini dans : interfaces/RendererOptions.ts:297

Valeur par défaut

0.05

nodeStyleMap?

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

Défini dans : interfaces/RendererOptions.ts:190

Mappe les types de nœuds à leurs styles.

Chaque clé est un type de nœud (tel que renvoyé par nodeTypeAccessor) et correspond à un objet NodeStyle.

Remarques

Utilisé en conjonction avec nodeTypeAccessor

Exemple

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

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Défini dans : interfaces/RendererOptions.ts:148

Fonction pour accéder au type d'un nœud. Utilisé dans

Utilisé pour styliser les nœuds en fonction de leur type.

Paramètres

node

Node

Renvoie

string | undefined

Remarques

Utilisé en conjonction avec nodeStyleMap

Exemple

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

renderCluster()?

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

Défini dans : interfaces/RendererOptions.ts:104

Moteur de rendu personnalisé pour les clusters.

Permet un contrôle total sur la façon dont un cluster est affiché. La fonction peut renvoyer soit :

Un HTMLElement à utiliser comme cluster, ou
Une chaîne à restituer à l'intérieur du cluster

Paramètres

cluster

Node

Renvoie

string | void | HTMLElement

Exemple

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

Défini dans : interfaces/RendererOptions.ts:77

Moteur de rendu personnalisé pour les étiquettes de bord.

Permet un contrôle total sur la façon dont les étiquettes de bord sont affichées. La fonction peut renvoyer soit :

Un HTMLElement à utiliser comme étiquette du bord, ou
Une chaîne à restituer à l'intérieur de l'étiquette

Paramètres

edge

Edge

Renvoie

string | void | HTMLElement

Exemple

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

Défini dans : interfaces/RendererOptions.ts:52

Moteur de rendu personnalisé pour les nœuds.

Permet un contrôle total sur la façon dont un nœud est affiché. La fonction peut renvoyer soit :

Un HTMLElement à utiliser comme nœud,
Une chaîne à restituer à l'intérieur du nœud, ou
rien, pour laisser ce nœud au pipeline de style normal

Une carte renvoyée ici est le nœud : aucune forme, icône, image ou étiquette n'est dessinée derrière elle, et sa taille mesurée détermine le rayon de collision et les ancres de bord. Ne rien renvoyer pour un nœud lui donne à la place son entrée nodeStyleMap, sa forme et son étiquette comme d'habitude — cela peut donc carder quelques nœuds plutôt que tous.

Pour une carte qui compose avec le reste de la chaîne de style, déclarez NodeStyle.html avec shape: 'none' à la place ; il se résout par type ou par nœud, celui-ci étant global.

Paramètres

node

Node

Renvoie

string | void | HTMLElement

Exemple

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

Défini dans : interfaces/RendererOptions.ts:316

type

type: RendererType

Défini dans : interfaces/RendererOptions.ts:15

Définit la méthode de rendu utilisée par le graphique.

zoomAnimation

zoomAnimation: boolean

Défini dans : interfaces/RendererOptions.ts:293

Valeur par défaut

true

zoomAnimationDuration

zoomAnimationDuration: number

Défini dans : interfaces/RendererOptions.ts:295

Valeur par défaut

zoomEnabled

zoomEnabled: boolean

Défini dans : interfaces/RendererOptions.ts:291

Valeur par défaut

true

Interface: GraphRendererOptions ​

Propriétés ​

beforeRender() ​

Paramètres ​

graph ​

Renvoie ​

defaultEdgeStyle ​

Valeur par défaut ​

defaultLabelStyle ​

Valeur par défaut ​

defaultNodeStyle ​

Valeur par défaut ​

detailTransition? ​

Valeur par défaut ​

dragEnabled ​

Valeur par défaut ​

edgeStyleMap? ​

Remarques ​

Exemple ​

edgeTypeAccessor()? ​

Paramètres ​

edge ​

Renvoie ​

Remarques ​

Exemple ​

enableFocusMode ​

Valeur par défaut ​

enableNodeExpansion ​

Valeur par défaut ​

fitAnchor? ​

focusTierTrigger? ​

Valeur par défaut ​

groupOutline()? ​

Paramètres ​

group ​

Renvoie ​

groupStyle()? ​

Paramètres ​

group ​

base ​

Renvoie ​

Exemples ​

interactionEnabled ​

Valeur par défaut ​

markerStyleMap? ​

Valeur par défaut ​

Exemple ​

maxZoom ​

Valeur par défaut ​

minFitScale? ​

minLabelFontSize? ​

Valeur par défaut ​

minZoom ​

Valeur par défaut ​

nodeStyleMap? ​

Remarques ​

Exemple ​

nodeTypeAccessor()? ​

Paramètres ​

node ​

Renvoie ​

Remarques ​

Exemple ​

renderCluster()? ​

Paramètres ​

cluster ​

Renvoie ​

Exemple ​

renderLabel()? ​

Paramètres ​

edge ​

Renvoie ​

Exemple ​

renderNode()? ​

Paramètres ​

node ​

Renvoie ​

Exemple ​

selectionBox ​

type ​

Interface: GraphRendererOptions

Propriétés

beforeRender()

Paramètres

graph

Renvoie

defaultEdgeStyle

Valeur par défaut

defaultLabelStyle

Valeur par défaut

defaultNodeStyle

Valeur par défaut

detailTransition?

Valeur par défaut

dragEnabled

Valeur par défaut

edgeStyleMap?

Remarques

Exemple

edgeTypeAccessor()?

Paramètres

edge

Renvoie

Remarques

Exemple

enableFocusMode

Valeur par défaut

enableNodeExpansion

Valeur par défaut

fitAnchor?

focusTierTrigger?

Valeur par défaut

groupOutline()?

Paramètres

group

Renvoie

groupStyle()?

Paramètres

group

base

Renvoie

Exemples

interactionEnabled

Valeur par défaut

markerStyleMap?

Valeur par défaut

Exemple

maxZoom

Valeur par défaut

minFitScale?

minLabelFontSize?

Valeur par défaut

minZoom

Valeur par défaut

nodeStyleMap?

Remarques

Exemple

nodeTypeAccessor()?

Paramètres

node

Renvoie

Remarques

Exemple

renderCluster()?

Paramètres

cluster

Renvoie

Exemple

renderLabel()?

Paramètres

edge

Renvoie

Exemple

renderNode()?

Paramètres

node

Renvoie

Exemple

selectionBox

type