Interface: NodeStyle

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

Propriétés

badges?

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

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

Petits indicateurs épinglés sur le bord du nœud, indépendants de tout autre canal — voir NodeBadge.

Résolu comme n'importe quel autre canal : la déclaration la plus étroite l'emporte d'emblée plutôt que de fusionner, donc le propre badges ** d'un nœud remplace ** quel que soit nodeStyleMap ou defaultNodeStyle lui a donné. Un tableau vide est le moyen de dire « celui-ci n’en porte pas » ; undefined ne restitue aucun groupe de badges.

Quatre s'adaptent sur un nœud simple, deux contre un avec des enfants (l'espace d'expansion réserve les coins Est). Tout ce qui va au-delà se transforme en un badge +n nommant le reste.

color

color: string | (node) => string

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

La couleur principale du nœud

Valeur par défaut

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

focusTier?

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

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

Le dessin utilisé lorsque ce nœud est survolé, ou sélectionné seul, quel que soit le zoom. C'est là qu'un nœud dit tout sur lui-même.

Il fusionne sur le style base résolu plutôt que sur le niveau actif, de sorte que le shape ou html d'un niveau de puce ne peut pas y pénétrer, et il conserve une taille constante à l'écran quelle que soit la distance du zoom arrière du graphique. Cela ne change jamais la géométrie du nœud : les bords continuent d'atterrir sur le niveau inférieur et rien ne bouge.

Quand il tire, c'est GraphRendererOptions.focusTierTrigger à dire.

focusTierYieldsAt?

optional focusTierYieldsAt: number

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

L'index dans tiers à partir duquel focusTier arrête de tirer. Pendant que le nœud est dessiné à ce niveau ou à un niveau plus riche, survolez-le et une seule sélection le laisse tel quel, pour un dessin de focus que le niveau de zoom affiche déjà. Lorsqu'il n'est pas défini, le dessin de mise au point se déclenche à chaque niveau. Ignoré sur un nœud sans tiers.

Exemple

// 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

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

Valeur par défaut

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

html()?

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

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

Le code HTML à utiliser à l'intérieur du nœud en tant qu'élément SVGForeignObject.

Résolu comme tous les autres canaux, de sorte qu'une carte peut être déclarée à n'importe quel niveau - nodeStyleMap[type].html donne une carte à un type de nœud tandis que les autres conservent leur forme, et le style propre d'un seul nœud remplace cela. Ne rien renvoyer ne tire aucune carte, donc un rappel peut carder certains nœuds et laisser les autres tranquilles.

Associez-le à shape: 'none' pour une carte qui est le nœud. Sinon, la forme est toujours dessinée derrière elle, et size est le plus petit que puisse être le nœud.

La carte est mesurée et le nœud s'y développe, elle n'est donc jamais coupée et les bords atterrissent sur sa bordure. Vous n'êtes pas obligé de rendre l'élément renvoyé auto-dimensionné — il est mesuré à l'intérieur d'une boîte de rétrécissement pour s'adapter, donc width: 100% se résout par rapport à son propre contenu plutôt que par rapport à l'espace réservé.

Trusted HTML uniquement. Tout ce que cela renvoie est inséré tel quel, alors construisez-le avec textContent (ou échappez-le) plutôt que d'interpoler les données du nœud dans une chaîne de balisage.

Paramètres

node

Node

Renvoie

string | void | HTMLElement

iconClass?

optional iconClass: string

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

iconUnicode?

optional iconUnicode: string

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

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

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

Comment une image imagePath se trouve sur la forme du nœud. Résoluble par nœud afin que différents nœuds puissent mélanger les modes (par exemple, captures d'écran 'cover', autres pièces jointes 'icon').

Valeur par défaut

'icon'

imagePath?

optional imagePath: string

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

URL d'une image à dessiner sur le nœud. Limité aux schémas http:, https:, data: et blob: ; tout le reste est ignoré. Le rendu récupère l'URL.

layoutSize?

optional layoutSize: number

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

La demi-largeur de la boîte que ce nœud se réserve dans la mise en page, en unités graphiques. C'est la seule taille que la simulation voit : définissez-la et le dessin ne détermine plus le rayon de collision, donc un nœud peut changer la façon dont il est dessiné sans rien déplacer.

Laissez-le non défini et le dessin possède l'espacement, comme il l'a toujours fait : une forme espace par son size, une carte HTML par ce qu'elle mesure.

Valeur par défaut

la moitié du niveau déclaré le plus large width, ou non défini lorsqu'il n'y a pas de niveaux

shape

shape: (node) => NodeShape | NodeShape

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

La forme du nœud, soit une forme standard, soit un chemin SVG personnalisé

Valeur par défaut

circle

size

size: number | (node) => number

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

Valeur par défaut

strokeColor

strokeColor: string | (node) => string

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

Valeur par défaut

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

strokeWidth

strokeWidth: string | number

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

Valeur par défaut

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

styleCb()?

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

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

Rappel pour remplacer dynamiquement les propriétés de style en fonction du nœud.

Son emplacement dépend du bloc de style qui le déclare. Sur le style ** d'un nœud **, il gagne carrément, et nodeStyleMap est entièrement ignoré. Sur render.defaultNodeStyle, c'est la forme calculée de l'emplacement par défaut : il ne remplit que ce que ni le nœud ni nodeStyleMap n'ont défini (et ce qu'un nœud par nœud styleCb a laissé de côté), et son résultat perd toujours face aux deux.

S'exécute une fois par nœud et par rendu, alors gardez-le bon marché.

Paramètres

node

Node

Renvoie

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

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

Balisage SVG en ligne dessiné à l'intérieur du nœud. Désinfecté avant d'atteindre le DOM (les scripts et les gestionnaires d'événements sont supprimés), mais un <image href> distant à l'intérieur est toujours récupéré lors du rendu du nœud - voir le guide de sécurité.

text?

optional text: string | (node) => string

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

Le texte à utiliser à l'intérieur du nœud comme élément SVGText

textAnchorPosition

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

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

Valeur par défaut

'middle'

textColor

textColor: string | (node) => string

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

Valeur par défaut

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

textFontSize?

optional textFontSize: number | (node) => number

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

Taille de la police de l'étiquette du nœud, en unités graphiques (CSS pixels au zoom 1). Le décalage de l'étiquette, son budget de caractère intégré et la porte de zoom le suivent tous.

Valeur par défaut

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

textHorizontalShift

textHorizontalShift: number | (node) => number

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

Le décalage horizontal appliqué à la position de l'étiquette du nœud. Une valeur de 0 signifie qu'il est centré sur le nœud, une valeur de 1 est à l'est du nœud, -1 est à l'ouest du nœud. D'autres valeurs sont également acceptées, par exemple 0,5 serait à mi-chemin entre le centre et l'est du nœud.

Valeur par défaut

textMaxWidth?

optional textMaxWidth: number | (node) => number

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

L'étiquette de nœud la plus large peut être dessinée, en unités graphiques (CSS pixels au zoom 1). Une étiquette plus longue est raccourcie avec des points de suspension au milieu pour s'adapter. Remplace le budget intégré, qui est dimensionné en fonction du nœud. Ignoré lorsque textTruncate est false.

Valeur par défaut

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

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

Degré de rotation appliqué à l'étiquette du nœud. Les valeurs positives tournent dans le sens des aiguilles d'une montre, les valeurs négatives tournent dans le sens inverse des aiguilles d'une montre.

Valeur par défaut

textTruncate

textTruncate: boolean | (node) => boolean

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

Raccourcissez une étiquette trop large avec des points de suspension au milieu (head…tail) ; false le dessine en entier, sur une pilule thématique où il déborde au-delà du nœud.

Valeur par défaut

true

textVerticalShift

textVerticalShift: number | (node) => number

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

Le décalage vertical appliqué à la position de l'étiquette du nœud. Une valeur de 0 signifie qu'il est centré sur le nœud, une valeur de 1 est au nord du nœud, -1 est au sud du nœud. D'autres valeurs sont également acceptées, par exemple 0,5 serait à mi-chemin entre le centre et le nord du nœud.

Valeur par défaut

tiers?

optional tiers: NodeTier[]

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

Dessins alternatifs de ce nœud, choisis en fonction de la taille actuelle de son rendu : un glyphe sur un aperçu, une puce étiquetée lorsqu'il y a de la place pour une, une carte lorsqu'il y a de la place pour cela. Commandé le plus petit en premier ; le plus riche qui convient gagne, et le style de base est le sol quand aucun ne le fait.

L'empreinte du nœud ne change jamais avec le dessin (voir layoutSize), donc l'échange de niveaux ne bouge rien.

Exemple

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

Interface: NodeStyle ​

Propriétés ​

badges? ​

color ​

Valeur par défaut ​

focusTier? ​

focusTierYieldsAt? ​

Exemple ​

fontFamily ​

Valeur par défaut ​

html()? ​

Paramètres ​

node ​

Renvoie ​

iconClass? ​

iconUnicode? ​

imageFit? ​

Valeur par défaut ​

imagePath? ​

layoutSize? ​

Valeur par défaut ​

shape ​

Valeur par défaut ​

size ​

Valeur par défaut ​

strokeColor ​

Valeur par défaut ​

strokeWidth ​

Valeur par défaut ​

styleCb()? ​

Paramètres ​

node ​

Renvoie ​

svgIcon? ​

text? ​

textAnchorPosition ​

Valeur par défaut ​

textColor ​

Valeur par défaut ​

textFontSize? ​

Valeur par défaut ​

textHorizontalShift ​

Valeur par défaut ​

textMaxWidth? ​

Valeur par défaut ​

textRotateDegree ​

Valeur par défaut ​

textTruncate ​

Valeur par défaut ​

textVerticalShift ​

Valeur par défaut ​

tiers? ​

Exemple ​

Interface: NodeStyle

Propriétés

badges?

color

Valeur par défaut

focusTier?

focusTierYieldsAt?

Exemple

fontFamily

Valeur par défaut

html()?

Paramètres

node

Renvoie

iconClass?

iconUnicode?

imageFit?

Valeur par défaut

imagePath?

layoutSize?

Valeur par défaut

shape

Valeur par défaut

size

Valeur par défaut

strokeColor

Valeur par défaut

strokeWidth

Valeur par défaut

styleCb()?

Paramètres

node

Renvoie

svgIcon?

text?

textAnchorPosition

Valeur par défaut

textColor

Valeur par défaut

textFontSize?

Valeur par défaut

textHorizontalShift

Valeur par défaut

textMaxWidth?

Valeur par défaut

textRotateDegree

Valeur par défaut

textTruncate

Valeur par défaut

textVerticalShift

Valeur par défaut

tiers?

Exemple