Interface: NodeStyle

Definiert in: interfaces/RendererOptions.ts:468

Eigenschaften

badges?

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

Definiert in: interfaces/RendererOptions.ts:585

Kleine Indikatoren, die unabhängig von jedem anderen Kanal am Rand des Knotens befestigt sind – siehe NodeBadge.

Wird wie bei jedem anderen Kanal aufgelöst: Die engste Deklaration gewinnt direkt und nicht zusammengeführt, sodass das eigene badges **** ersetzt, was auch immer nodeStyleMap oder defaultNodeStyle ihm gegeben hat. Mit einem leeren Array kann man sagen: „Dieser trägt keine.“; undefined rendert überhaupt keine Badge-Gruppe.

Vier passen auf einen einfachen Knoten, zwei auf einen mit Kindern (das Erweiterungsangebot behält die östlichen Ecken). Alles, was darüber hinausgeht, wird zu einem +n-Abzeichen zusammengefasst, das den Rest benennt.

color

color: string | (node) => string

Definiert in: interfaces/RendererOptions.ts:478

Die Hauptfarbe des Knotens

Standardwert

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

focusTier?

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

Definiert in: interfaces/RendererOptions.ts:615

Die Zeichnung, die verwendet wird, während dieser Knoten mit der Maus bewegt wird oder einzeln ausgewählt wird – unabhängig vom Zoom. Hier sagt ein Knoten alles über sich selbst aus.

Es verschmilzt über den aufgelösten Basis-Stil und nicht über die aktive Ebene, sodass shape oder html einer Chipebene nicht hineinsickern können und die Größe auf dem Bildschirm konstant bleibt, egal wie weit das Diagramm herausgezoomt wird. Die Geometrie des Knotens wird dadurch nie verändert: Kanten landen immer wieder auf der Ebene darunter und nichts bewegt sich.

Wenn es feuert, ist GraphRendererOptions.focusTierTrigger ist zu sagen.

focusTierYieldsAt?

optional focusTierYieldsAt: number

Definiert in: interfaces/RendererOptions.ts:630

Der Index in Stufen, ab dem focusTier aufhört zu feuern. Während der Knoten auf dieser oder einer umfangreicheren Ebene gezeichnet wird, lassen Sie ihn beim Bewegen des Mauszeigers und einer Einzelauswahl unverändert, um eine Fokuszeichnung zu erhalten, die bereits in der Zoomebene angezeigt wird. Unscharf, die Fokuszeichnung wird auf jeder Stufe ausgelöst. Wird auf einem Knoten ohne tiers ignoriert.

Beispiel

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

Definiert in: interfaces/RendererOptions.ts:486

Standardwert

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

html()?

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

Definiert in: interfaces/RendererOptions.ts:572

Der HTML-Code, der innerhalb des Knotens als SVGForeignObject-Element verwendet werden soll.

Wird wie jeder andere Kanal aufgelöst, sodass eine Karte auf jeder Ebene deklariert werden kann – nodeStyleMap[type].html gibt einem Knotentyp eine Karte, während der Rest seine Form behält, und der eigene Stil eines einzelnen Knotens überschreibt dies. Wenn Sie nichts zurückgeben, wird keine Karte gezogen, sodass ein Rückruf einige Knoten kartieren und die anderen in Ruhe lassen kann.

Koppeln Sie es mit shape: 'none' für eine Karte, die ist der Knoten. Ansonsten wird die Form immer noch dahinter gezeichnet und size ist der kleinste Knoten, den der Knoten haben kann.

Die Karte wird gemessen und der Knoten wächst an sie heran, so dass sie niemals abgeschnitten wird und Kanten auf ihrem Rand landen. Sie müssen die Größe des zurückgegebenen Elements nicht selbst anpassen – es wird innerhalb einer verkleinerbaren Box gemessen, sodass width: 100% anhand seines eigenen Inhalts und nicht anhand des Platzhalters aufgelöst wird.

Vertrauenswürdig nur HTML. Was auch immer dies zurückgibt, wird so eingefügt, wie es ist, also erstellen Sie es mit textContent (oder maskieren Sie es), anstatt Knotendaten in eine Markup-Zeichenfolge zu interpolieren.

Parameter

node

Node

Rückgabewert

string | void | HTMLElement

iconClass?

optional iconClass: string

Definiert in: interfaces/RendererOptions.ts:530

iconUnicode?

optional iconUnicode: string

Definiert in: interfaces/RendererOptions.ts:531

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

Definiert in: interfaces/RendererOptions.ts:548

Wie ein imagePath-Bild auf der Form des Knotens sitzt. Pro Knoten auflösbar, sodass verschiedene Knoten Modi mischen können (z. B. Screenshots 'cover', andere Anhänge 'icon').

Standardwert

'icon'

imagePath?

optional imagePath: string

Definiert in: interfaces/RendererOptions.ts:542

URL eines Bildes, das auf dem Knoten gezeichnet werden soll. Beschränkt auf die Schemata http:, https:, data: und blob:; alles andere wird ignoriert. Beim Rendern wird die URL abgerufen.

layoutSize?

optional layoutSize: number

Definiert in: interfaces/RendererOptions.ts:641

Die halbe Breite der Box, die dieser Knoten im Layout für sich reserviert, in Diagrammeinheiten. Dies ist die einzige Größe, die die Simulation jemals sieht: Wenn Sie sie festlegen, bestimmt die Zeichnung nicht mehr den Kollisionsradius, sodass ein Knoten die Art und Weise ändern kann, wie er gezeichnet wird, ohne etwas zu bewegen.

Lassen Sie es deaktiviert und die Zeichnung besitzt den Abstand, wie immer – die Abstände einer Form durch ihre size, eine HTML-Karte durch das, was sie misst.

Standardwert

die Hälfte der breitesten deklarierten Stufe width oder nicht gesetzt, wenn keine Stufen vorhanden sind

shape

shape: (node) => NodeShape | NodeShape

Definiert in: interfaces/RendererOptions.ts:473

Die Form des Knotens, entweder eine Standardform oder ein benutzerdefinierter SVG-Pfad

Standardwert

circle

size

size: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:480

Standardwert

strokeColor

strokeColor: string | (node) => string

Definiert in: interfaces/RendererOptions.ts:482

Standardwert

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

strokeWidth

strokeWidth: string | number

Definiert in: interfaces/RendererOptions.ts:484

Standardwert

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

styleCb()?

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

Definiert in: interfaces/RendererOptions.ts:653

Rückruf zum dynamischen Überschreiben von Stileigenschaften basierend auf dem Knoten.

Wo es sich befindet, hängt davon ab, welcher Stilblock es deklariert. Bei einem Knoten-eigenen-Stil gewinnt er direkt, und nodeStyleMap wird vollständig übersprungen. Bei render.defaultNodeStyle handelt es sich um die berechnete Form des Standard-Slots: Es füllt nur das aus, was weder der Knoten noch nodeStyleMap festgelegt hat (und was ein styleCb pro Knoten ausgelassen hat), und sein Ergebnis verliert immer noch an beide.

Läuft einmal pro Knoten und Rendering, also halten Sie es günstig.

Parameter

node

Node

Rückgabewert

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

Definiert in: interfaces/RendererOptions.ts:537

Inline-Markup SVG, das innerhalb des Knotens gezeichnet wird. Bereinigt, bevor es das DOM erreicht (Skripting und Event-Handler werden entfernt), aber ein darin enthaltenes Remote-<image href> wird weiterhin abgerufen, wenn der Knoten rendert – siehe Sicherheitsleitfaden.

text?

optional text: string | (node) => string

Definiert in: interfaces/RendererOptions.ts:552

Der Text, der innerhalb des Knotens als SVGText-Element verwendet werden soll

textAnchorPosition

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

Definiert in: interfaces/RendererOptions.ts:490

Standardwert

'middle'

textColor

textColor: string | (node) => string

Definiert in: interfaces/RendererOptions.ts:488

Standardwert

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

textFontSize?

optional textFontSize: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:529

Schriftgröße der Knotenbeschriftung in Diagrammeinheiten (CSS Pixel bei Zoom 1). Der Offset des Etiketts, das integrierte Zeichenbudget und das Zoom-Gate folgen ihm.

Standardwert

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

textHorizontalShift

textHorizontalShift: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:497

Die horizontale Verschiebung, die auf die Beschriftungsposition des Knotens angewendet wird. Ein Wert von 0 bedeutet, dass es auf den Knoten zentriert ist, ein Wert von 1 ist östlich des Knotens, -1 ist westlich des Knotens. Es werden auch andere Werte akzeptiert, z. B. 0,5 auf halbem Weg zwischen der Mitte und dem Osten des Knotens.

Standardwert

textMaxWidth?

optional textMaxWidth: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:523

Die breiteste Knotenbeschriftung, die gezeichnet werden kann, in Diagrammeinheiten (CSS Pixel bei Zoom 1). Ein längeres Etikett wird mit einem mittleren Auslassungszeichen gekürzt, damit es passt. Ersetzt das integrierte Budget, dessen Größe an den Knoten angepasst ist. Wird ignoriert, wenn textTruncate false ist.

Standardwert

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:510

Auf die Bezeichnung des Knotens angewendeter Rotationsgrad. Positive Werte drehen sich im Uhrzeigersinn, negative Werte drehen sich gegen den Uhrzeigersinn.

Standardwert

textTruncate

textTruncate: boolean | (node) => boolean

Definiert in: interfaces/RendererOptions.ts:516

Kürzen Sie ein zu breites Etikett mit einem mittleren Auslassungszeichen (head…tail); false zeichnet es vollständig auf eine thematische Pille, wo es über den Knoten hinausläuft.

Standardwert

true

textVerticalShift

textVerticalShift: number | (node) => number

Definiert in: interfaces/RendererOptions.ts:504

Die vertikale Verschiebung, die auf die Beschriftungsposition des Knotens angewendet wird. Ein Wert von 0 bedeutet, dass es auf den Knoten zentriert ist, ein Wert von 1 liegt nördlich des Knotens, -1 bedeutet südlich des Knotens. Es werden auch andere Werte akzeptiert, z. B. 0,5 auf halbem Weg zwischen der Mitte und dem Norden des Knotens.

Standardwert

tiers?

optional tiers: NodeTier[]

Definiert in: interfaces/RendererOptions.ts:603

Alternative Zeichnungen dieses Knotens, ausgewählt nach der aktuellen Darstellungsgröße – eine Glyphe auf einer Übersicht, ein beschrifteter Chip, sobald Platz dafür ist, eine Karte, sobald Platz dafür ist. Kleinstes zuerst bestellt; Der reichste Stil, der passt, gewinnt, und der Basisstil ist der Boden, wenn keiner passt.

Der Footprint des Knotens ändert sich mit der Zeichnung nie (siehe layoutSize), daher wird durch das Vertauschen der Ebenen nichts verschoben.

Beispiel

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

Interface: NodeStyle ​

Eigenschaften ​

badges? ​

color ​

Standardwert ​

focusTier? ​

focusTierYieldsAt? ​

Beispiel ​

fontFamily ​

Standardwert ​

html()? ​

Parameter ​

node ​

Rückgabewert ​

iconClass? ​

iconUnicode? ​

imageFit? ​

Standardwert ​

imagePath? ​

layoutSize? ​

Standardwert ​

shape ​

Standardwert ​

size ​

Standardwert ​

strokeColor ​

Standardwert ​

strokeWidth ​

Standardwert ​

styleCb()? ​

Parameter ​

node ​

Rückgabewert ​

svgIcon? ​

text? ​

textAnchorPosition ​

Standardwert ​

textColor ​

Standardwert ​

textFontSize? ​

Standardwert ​

textHorizontalShift ​

Standardwert ​

textMaxWidth? ​

Standardwert ​

textRotateDegree ​

Standardwert ​

textTruncate ​

Standardwert ​

textVerticalShift ​

Standardwert ​

tiers? ​

Beispiel ​

Interface: NodeStyle

Eigenschaften

badges?

color

Standardwert

focusTier?

focusTierYieldsAt?

Beispiel

fontFamily

Standardwert

html()?

Parameter

node

Rückgabewert

iconClass?

iconUnicode?

imageFit?

Standardwert

imagePath?

layoutSize?

Standardwert

shape

Standardwert

size

Standardwert

strokeColor

Standardwert

strokeWidth

Standardwert

styleCb()?

Parameter

node

Rückgabewert

svgIcon?

text?

textAnchorPosition

Standardwert

textColor

Standardwert

textFontSize?

Standardwert

textHorizontalShift

Standardwert

textMaxWidth?

Standardwert

textRotateDegree

Standardwert

textTruncate

Standardwert

textVerticalShift

Standardwert

tiers?

Beispiel