Interface: NodeStyle

Gedefinieerd in: interfaces/RendererOptions.ts:468

Eigenschappen

badges?

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

Gedefinieerd in: interfaces/RendererOptions.ts:585

Kleine indicatoren vastgemaakt aan de rand van het knooppunt, onafhankelijk van elk ander kanaal - zie NodeBadge.

Vastbesloten zoals elk ander kanaal: de smalste verklaring wint regelrechte in plaats van samenvoegen, dus de eigen badges van een knooppunt vervangt wat dan ook nodeStyleMap of defaultNodeStyle gaf het. Een lege array is de manier om te zeggen "deze draagt niets"; undefined geeft helemaal geen badgegroep weer.

Vier passen op een gewoon knooppunt, twee op één met kinderen (de uitbreidingsvergoeding behoudt de Oostelijke hoeken). Alles daarbuiten valt uiteen in een +n-badge met de naam van de rest.

color

color: string | (node) => string

Gedefinieerd in: interfaces/RendererOptions.ts:478

De hoofdkleur van het knooppunt

Standaard

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

focusTier?

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

Gedefinieerd in: interfaces/RendererOptions.ts:615

De tekening die wordt gebruikt terwijl dit knooppunt zweeft, of op zichzelf wordt geselecteerd, wat dan ook zoom. Dit is waar een knooppunt alles over zichzelf zegt.

Het voegt zich samen over de opgeloste base-stijl in plaats van over het actieve niveau, dus een chip niveau shape of html kan er niet in lekken, en het heeft een constante grootte op het scherm hoe ver de grafiek ook is uitgezoomd. Het verandert nooit de geometrie van het knooppunt: de randen blijven behouden landt op de laag eronder en er beweegt niets.

Wanneer het vuurt is GraphRendererOptions.focusTierTrigger's om te zeggen.

focusTierYieldsAt?

optional focusTierYieldsAt: number

Gedefinieerd in: interfaces/RendererOptions.ts:630

De index in tiers waarvandaan focusTier stopt met schieten. Terwijl het knooppunt wordt getekend op dat niveau of een rijker niveau, zweef en een eenzame selectie laat het zoals het is, voor een focustekening die de zoomlaag al laat zien. Als de focustekening niet wordt ingeschakeld, wordt deze geactiveerd op elk niveau. Genegeerd op een knooppunt zonder tiers.

Voorbeeld

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

Gedefinieerd in: interfaces/RendererOptions.ts:486

Standaard

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

html()?

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

Gedefinieerd in: interfaces/RendererOptions.ts:572

De html die binnen het knooppunt moet worden gebruikt als een SVGForeignObject-element.

Opgelost zoals elk ander kanaal, dus een kaart kan op elk niveau worden gedeclareerd — nodeStyleMap[type].html geeft één soort knooppunt een kaart, terwijl de rest deze behoudt vormen, en de eigen stijl van een enkel knooppunt overschrijft dat. Niets retourneren levert nee op kaart, zodat één callback sommige knooppunten kan kaarten en de andere met rust kan laten.

Koppel het met shape: 'none' voor een kaart waarvan **** het knooppunt is. Anders is de vorm nog steeds erachter getekend, en size is het kleinste knooppunt dat kan zijn.

De kaart wordt gemeten en het knooppunt groeit ernaartoe, zodat deze nooit wordt afgekapt en de randen landen op zijn grens. U hoeft het geretourneerde element niet zelf-dimensionaal te maken; dat is zo gemeten in een krimpdoos, dus width: 100% lost op tegen zijn eigen situatie inhoud in plaats van tegen de tijdelijke aanduiding.

Alleen HTML vertrouwd. Wat dit resultaat ook is, wordt ingevoegd zoals het is, dus bouw het met textContent (of escape it) in plaats van knooppuntgegevens te interpoleren in een opmaaktekenreeks.

Parameters

node

Node

Retouren

string | void | HTMLElement

iconClass?

optional iconClass: string

Gedefinieerd in: interfaces/RendererOptions.ts:530

iconUnicode?

optional iconUnicode: string

Gedefinieerd in: interfaces/RendererOptions.ts:531

imageFit?

optional imageFit: (node) => ImageFit | ImageFit

Gedefinieerd in: interfaces/RendererOptions.ts:548

Hoe een imagePath-afbeelding op de vorm van het knooppunt zit. Per node op te lossen dus verschillende knooppunten kunnen modi combineren (bijvoorbeeld schermafbeeldingen 'cover', andere bijlagen 'icon').

Standaard

'icon'

imagePath?

optional imagePath: string

Gedefinieerd in: interfaces/RendererOptions.ts:542

URL van een afbeelding die op het knooppunt moet worden getekend. Beperkt tot de http:, https:, data: en blob: regelingen; al het andere wordt genegeerd. Door het te renderen, wordt de URL opgehaald.

layoutSize?

optional layoutSize: number

Gedefinieerd in: interfaces/RendererOptions.ts:641

De halve breedte van de doos die dit knooppunt voor zichzelf reserveert in de lay-out, in grafiekeenheden. Dit is de enige maat die de simulatie ooit ziet: stel deze in en de tekening rijdt niet meer de botsingsradius, zodat een knooppunt de manier waarop het wordt getekend kan veranderen zonder iets te verplaatsen.

Laat het niet ingesteld en de tekening bezit de afstand, zoals altijd: een vorm met afstanden het is size, een HTML-kaart volgens wat hij meet.

Standaard

de helft van het breedste aangegeven niveau width, of uitgeschakeld als er geen niveaus zijn

shape

shape: (node) => NodeShape | NodeShape

Gedefinieerd in: interfaces/RendererOptions.ts:473

De vorm van het knooppunt, een standaardvorm of een aangepast SVG pad

Standaard

circle

size

size: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:480

Standaard

strokeColor

strokeColor: string | (node) => string

Gedefinieerd in: interfaces/RendererOptions.ts:482

Standaard

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

strokeWidth

strokeWidth: string | number

Gedefinieerd in: interfaces/RendererOptions.ts:484

Standaard

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

styleCb()?

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

Gedefinieerd in: interfaces/RendererOptions.ts:653

Terugbellen om stijleigenschappen dynamisch te overschrijven op basis van het knooppunt.

Waar het zich bevindt, hangt af van welk stijlblok het declareert. Op een eigen knooppunt stijl wint het regelrecht, en nodeStyleMap wordt volledig overgeslagen. Aan render.defaultNodeStyle het is de berekende vorm van het standaardslot: het vult alleen wat noch het knooppunt, noch nodeStyleMap heeft ingesteld (en wat een per-knooppunt styleCb weggelaten), en het resultaat verliest nog steeds van beide.

Wordt één keer per knooppunt per render uitgevoerd, dus houd het goedkoop.

Parameters

node

Node

Retouren

Partial<NodeStyle>

svgIcon?

optional svgIcon: string

Gedefinieerd in: interfaces/RendererOptions.ts:537

Inline SVG opmaak getekend binnen het knooppunt. Opgeschoond voordat het de DOM bereikt (scripting en gebeurtenishandlers worden verwijderd), maar een externe <image href> erin wordt nog steeds opgehaald wanneer het knooppunt wordt weergegeven: zie de beveiligingshandleiding.

text?

optional text: string | (node) => string

Gedefinieerd in: interfaces/RendererOptions.ts:552

De tekst die binnen het knooppunt moet worden gebruikt als een SVGText-element

textAnchorPosition

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

Gedefinieerd in: interfaces/RendererOptions.ts:490

Standaard

'middle'

textColor

textColor: string | (node) => string

Gedefinieerd in: interfaces/RendererOptions.ts:488

Standaard

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

textFontSize?

optional textFontSize: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:529

Lettergrootte van het label van het knooppunt, in grafiekeenheden (CSS pixels bij zoom 1). Het etiket offset, het ingebouwde karakterbudget en de zoompoort volgen dit allemaal.

Standaard

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

textHorizontalShift

textHorizontalShift: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:497

De horizontale verschuiving die wordt toegepast op de labelpositie van het knooppunt. Een waarde van 0 betekent dat deze gecentreerd is op het knooppunt, een waarde van 1 ligt ten oosten van het knooppunt, -1 ligt ten westen van het knooppunt. Andere waarden worden ook geaccepteerd, bijvoorbeeld 0,5 zou halverwege het midden en het oosten van het knooppunt liggen.

Standaard

textMaxWidth?

optional textMaxWidth: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:523

Op zijn breedst kan een knooppuntlabel worden getekend, in grafiekeenheden (CSS pixels bij zoom 1). Een langer etiket wordt ingekort met een middelste ellips om te passen. Vervangt het ingebouwde budget, dat op maat is gemaakt naar het knooppunt. Genegeerd als textTruncate false is.

Standaard

undefined — the built-in budget

textRotateDegree

textRotateDegree: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:510

Rotatiegraad toegepast op het label van het knooppunt. Positieve waarden draaien met de klok mee, negatieve waarden draaien tegen de klok in.

Standaard

textTruncate

textTruncate: boolean | (node) => boolean

Gedefinieerd in: interfaces/RendererOptions.ts:516

Maak een te breed label korter met een middelste weglatingsteken (head…tail); false tekent het volledig, op een themapil waar het langs het knooppunt morst.

Standaard

true

textVerticalShift

textVerticalShift: number | (node) => number

Gedefinieerd in: interfaces/RendererOptions.ts:504

De verticale verschuiving die wordt toegepast op de labelpositie van het knooppunt. Een waarde van 0 betekent dat deze gecentreerd is op het knooppunt, een waarde van 1 ligt ten noorden van het knooppunt, -1 ligt ten zuiden van het knooppunt. Andere waarden worden ook geaccepteerd, bijvoorbeeld 0,5 zou halverwege het midden en het noorden van het knooppunt liggen.

Standaard

tiers?

optional tiers: NodeTier[]

Gedefinieerd in: interfaces/RendererOptions.ts:603

Alternatieve tekeningen van dit knooppunt, gekozen op basis van hoe groot het momenteel wordt weergegeven: een glyph op een overzicht, een gelabelde chip zodra er ruimte voor is, een kaart zodra er ruimte is daarvoor. Kleinste eerst besteld; de rijkste die past, wint, en de basisstijl is de vloer als niemand dat doet.

De footprint van het knooppunt verandert nooit met de tekening (zie layoutSize), dus Het wisselen van niveaus brengt niets met zich mee.

Voorbeeld

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

Interface: NodeStyle ​

Eigenschappen ​

badges? ​

color ​

Standaard ​

focusTier? ​

focusTierYieldsAt? ​

Voorbeeld ​

fontFamily ​

Standaard ​

html()? ​

Parameters ​

node ​

Retouren ​

iconClass? ​

iconUnicode? ​

imageFit? ​

Standaard ​

imagePath? ​

layoutSize? ​

Standaard ​

shape ​

Standaard ​

size ​

Standaard ​

strokeColor ​

Standaard ​

strokeWidth ​

Standaard ​

styleCb()? ​

Parameters ​

node ​

Retouren ​

svgIcon? ​

text? ​

textAnchorPosition ​

Standaard ​

textColor ​

Standaard ​

textFontSize? ​

Standaard ​

textHorizontalShift ​

Standaard ​

textMaxWidth? ​

Standaard ​

textRotateDegree ​

Standaard ​

textTruncate ​

Standaard ​

textVerticalShift ​

Standaard ​

tiers? ​

Voorbeeld ​

Interface: NodeStyle

Eigenschappen

badges?

color

Standaard

focusTier?

focusTierYieldsAt?

Voorbeeld

fontFamily

Standaard

html()?

Parameters

node

Retouren

iconClass?

iconUnicode?

imageFit?

Standaard

imagePath?

layoutSize?

Standaard

shape

Standaard

size

Standaard

strokeColor

Standaard

strokeWidth

Standaard

styleCb()?

Parameters

node

Retouren

svgIcon?

text?

textAnchorPosition

Standaard

textColor

Standaard

textFontSize?

Standaard

textHorizontalShift

Standaard

textMaxWidth?

Standaard

textRotateDegree

Standaard

textTruncate

Standaard

textVerticalShift

Standaard

tiers?

Voorbeeld