Hoe lang, in milliseconden, het duurt voordat een tekening in of uit de grafiek verdwijnt tijdens het zoomen verandert wat de moeite waard is om te tekenen. 0 maakt elke dergelijke wijziging in één enkel frame, namelijk wat een grafiek doet die aangeeft dat er geen overgang is.

Het omvat een knooppunt dat wisselt tussen zijn NodeStyle.tiers, zijn NodeStyle.focusTier tekening aankomen en vertrekken, en een labelkruising GraphRendererOptions.minLabelFontSize. Een uitgaande tekening wordt levend gehouden op a een eigen laag en de twee vervagen langs elkaar, zodat er nooit een knooppunt afwezig is tijdens de verwisseling - slechts kort zachter waar ze elkaar overlappen.

Elk knooppunt op het scherm overschrijdt op hetzelfde moment een drempel, dus dit begint met zoveel vervaagt naarmate er knooppunten veranderen. prefers-reduced-motion schakelt het uit.

Gemeten op 210 knooppunten die elk een kaart van 140x44 bevatten: de fade zelf kost niets — de canvas heeft over de hele lengte 60 fps, maar houdt zoveel uitgaande kaarten in leven voegt een ogenblik ongeveer 26 ms toe aan het ene frame dat de overtocht al doorbrengt. Stel het in 0 in een grafiek waarbij dat frame belangrijker is dan de overgang.

Standaard

dragEnabled

dragEnabled: boolean

Gedefinieerd in: interfaces/RendererOptions.ts:313

Standaard

true

edgeStyleMap?

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

Gedefinieerd in: interfaces/RendererOptions.ts:223

Wijst randsoorten toe aan hun stijlen.

Elke sleutel is een randsoort (zoals geretourneerd door edgeTypeAccessor) en wordt toegewezen aan a gedeeltelijk EdgeStyle. De eigen styleCb van een rand wint nog steeds precies van de kaart zoals het geval is bij nodeStyleMap.

Opmerkingen

Gebruikt in combinatie met edgeTypeAccessor

Voorbeeld

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

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Gedefinieerd in: interfaces/RendererOptions.ts:204

Functie om toegang te krijgen tot het soort rand: de dimensie edgeStyleMap toetsen aan, en die worden afgeleid van een edge legendasectie en randfilterfacetten vanaf het moment dat ze geen eigen datasleutel krijgen.

Parameters

edge

Edge

Retouren

string | undefined

Opmerkingen

Gebruikt in combinatie met edgeStyleMap

Voorbeeld

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

enableFocusMode

enableFocusMode: boolean

Gedefinieerd in: interfaces/RendererOptions.ts:228

Bepaalt of niet-verbonden knooppunten en randen grijs worden weergegeven wanneer een knooppunt wordt geselecteerd

Standaard

true

enableNodeExpansion

enableNodeExpansion: boolean

Gedefinieerd in: interfaces/RendererOptions.ts:234

Bepaalt of knooppunten kunnen worden uitgevouwen of ingeklapt om hun onderliggende knooppunten te tonen. Met false worden ook de punthaak, de snelkoppeling Enter en de samengevouwen stippellijn verwijderd.

Standaard

true

fitAnchor?

optional fitAnchor: string

Gedefinieerd in: interfaces/RendererOptions.ts:311

Het knooppunt met een fit op minFitScale wordt gecentreerd op basis van id; de groep van een gevouwen knooppunt staat er voor. De weergave stopt bij de randen van de inhoud, zodat er een anker in de buurt zit dichtbij die kant van het canvas. Niet ingesteld of niet getekend, de pasvorm wordt gecentreerd op de inhoud.

focusTierTrigger?

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

Gedefinieerd in: interfaces/RendererOptions.ts:245

Wanneer de NodeStyle.focusTier-tekening van een knooppunt wordt geactiveerd. De stijl zegt waar de nadruk op ligt tekening is; hier staat wanneer.

Selectie bevordert alleen een knooppunt dat op zichzelf is geselecteerd: een box-select van vijftig zou een muur van overlappende kaarten zijn. 'off' onderdrukt het gedrag zonder bewerking de stijl, dat is wat een integrator de vooraf ingestelde behoeften van iemand anders inbedt.

Standaard

'both'

groupOutline()?

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

Gedefinieerd in: interfaces/RendererOptions.ts:173

Wat de chip boven een open groep laat zien, in plaats van het label. Een string wordt weergegeven als tekst. De chip behoudt zijn nauwe markering en vouwt de groep nog steeds terug als erop wordt geklikt. Stuur niets terug om het label te behouden.

Parameters

group

GroupInfo

Retouren

string | void | HTMLElement

groupStyle()?

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

Gedefinieerd in: interfaces/RendererOptions.ts:167

Het uiterlijk van een groep gemaakt door UI.simplify, gelaagd over de standaard: een schijf in de de kleur van het type binnen een ring, de telling op de schijf zodra er ruimte is, het label hieronder. Een groep wordt getekend als een knooppunt, dus tiers, focusTier, html, shape en badges werken zoals ze doen op één. Retourneer niets om de standaardwaarde te behouden.

base is de stijl die de bibliotheek zou tekenen. Wat je terugstuurt vervangt de sleutels, dus om de telling op de schijf te houden terwijl je een niveau toevoegt, spreid je base.tiers.

Parameters

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Retouren

void | Partial<NodeStyle>

Voorbeelden

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

Gedefinieerd in: interfaces/RendererOptions.ts:315

Standaard

true

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Gedefinieerd in: interfaces/RendererOptions.ts:135

Definieert aangepaste stijlen voor markeringsvormen die in de grafiek worden gebruikt.

Elke sleutel is een markeringstype (bijvoorbeeld 'diamond', 'arrow') en verwijst naar een MarkerStyle-object.

Standaardwaarde

defaultMarkerStyleMap

Voorbeeld

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

maxZoom

maxZoom: number

Gedefinieerd in: interfaces/RendererOptions.ts:299

Standaard

minFitScale?

optional minFitScale: number

Gedefinieerd in: interfaces/RendererOptions.ts:305

De laagste schaal waarop een fit uitzoomt. Hier wordt inhoud weergegeven die minder nodig heeft schaal, gecentreerd op fitAnchor, en loopt voorbij de canvasranden. Onrustig, een aanval laat altijd alles zien. Een expliciete schaal die wordt doorgegeven aan fitAndCenter negeert deze.

minLabelFontSize?

optional minLabelFontSize: number

Gedefinieerd in: interfaces/RendererOptions.ts:284

De weergegeven lettergrootte, in CSS pixels, waaronder geen label wordt getekend.

Een label beweegt mee met de grafiek en schaalt mee, dus voorbij een bepaalde zoomfactor is het tekst niemand kan lezen – en in een grafiek die groot genoeg is om uitgezoomd te openen, elk label in één keer. Hieronder van dit formaat trekt de bibliotheek er geen van, waardoor ze ook uit de pas worden gehaald herpositioneert een label op elk simulatievinkje.

Eén getal voor het hele canvas: het label van een rand en een knooppunt. Het verschil ertussen valt al buiten de lettergrootte, omdat het label van een knooppunt daarvan is afgeleid zijn grootte: een groot knooppunt behoudt zijn label langer dan een klein knooppunt.

0 tekent elk label bij elke zoomlens.

Standaard

minZoom

minZoom: number

Gedefinieerd in: interfaces/RendererOptions.ts:297

Standaard

0.05

nodeStyleMap?

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

Gedefinieerd in: interfaces/RendererOptions.ts:190

Wijst knooppunttypen toe aan hun stijlen.

Elke sleutel is een knooppunttype (zoals geretourneerd door nodeTypeAccessor) en verwijst naar een NodeStyle-object.

Opmerkingen

Gebruikt in combinatie met nodeTypeAccessor

Voorbeeld

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

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Gedefinieerd in: interfaces/RendererOptions.ts:148

Functie om toegang te krijgen tot het type knooppunt. Gebruikt binnen

Wordt gebruikt om knooppunten te stylen op basis van hun type.

Parameters

node

Node

Retouren

string | undefined

Opmerkingen

Gebruikt in combinatie met nodeStyleMap

Voorbeeld

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

renderCluster()?

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

Gedefinieerd in: interfaces/RendererOptions.ts:104

Aangepaste renderer voor clusters.

Geeft volledige controle over hoe een cluster wordt weergegeven De functie kan het volgende retourneren:

Een HTMLElement die als cluster moet worden gebruikt, of
Een tekenreeks die binnen het cluster moet worden weergegeven

Parameters

cluster

Node

Retouren

string | void | HTMLElement

Voorbeeld

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

Gedefinieerd in: interfaces/RendererOptions.ts:77

Aangepaste renderer voor randlabels.

Geeft volledige controle over hoe randlabels worden weergegeven. De functie kan het volgende retourneren:

Een HTMLElement die moet worden gebruikt als label voor de rand, of
Een tekenreeks die binnen het label moet worden weergegeven

Parameters

edge

Edge

Retouren

string | void | HTMLElement

Voorbeeld

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

Gedefinieerd in: interfaces/RendererOptions.ts:52

Aangepaste renderer voor knooppunten.

Geeft volledige controle over hoe een knooppunt wordt weergegeven De functie kan het volgende retourneren:

Een HTMLElement die als knooppunt moet worden gebruikt,
Een tekenreeks die binnen het knooppunt moet worden weergegeven, of
niets, om dat knooppunt aan de normale stylingpijplijn over te laten

Een kaart die hier wordt geretourneerd is het knooppunt: er wordt geen vorm, pictogram, afbeelding of label getekend erachter, en de gemeten grootte drijft de botsradius en randankers aan. Als u niets retourneert voor een knooppunt, krijgt het zijn nodeStyleMap invoer, vorm en label zoals gewoonlijk - dus dit kan een paar knooppunten in kaart brengen in plaats van allemaal.

Voor een kaart die aansluit bij de rest van de stijlketen, declareert u NodeStyle.html met in plaats daarvan shape: 'none'; het wordt opgelost per type of per knooppunt, waar deze globaal is.

Parameters

node

Node

Retouren

string | void | HTMLElement

Voorbeeld

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

Gedefinieerd in: interfaces/RendererOptions.ts:316

type

type: RendererType

Gedefinieerd in: interfaces/RendererOptions.ts:15

Definieert de weergavemethode die door de grafiek wordt gebruikt.

zoomAnimation

zoomAnimation: boolean

Gedefinieerd in: interfaces/RendererOptions.ts:293

Standaard

true

zoomAnimationDuration

zoomAnimationDuration: number

Gedefinieerd in: interfaces/RendererOptions.ts:295

Standaard

zoomEnabled

zoomEnabled: boolean

Gedefinieerd in: interfaces/RendererOptions.ts:291

Standaard

true

Interface: GraphRendererOptions ​

Eigenschappen ​

beforeRender() ​

Parameters ​

graph ​

Retouren ​

defaultEdgeStyle ​

Standaardwaarde ​

defaultLabelStyle ​

Standaardwaarde ​

defaultNodeStyle ​

Standaardwaarde ​

detailTransition? ​

Standaard ​

dragEnabled ​

Standaard ​

edgeStyleMap? ​

Opmerkingen ​

Voorbeeld ​

edgeTypeAccessor()? ​

Parameters ​

edge ​

Retouren ​

Opmerkingen ​

Voorbeeld ​

enableFocusMode ​

Standaard ​

enableNodeExpansion ​

Standaard ​

fitAnchor? ​

focusTierTrigger? ​

Standaard ​

groupOutline()? ​

Parameters ​

group ​

Retouren ​

groupStyle()? ​

Parameters ​

group ​

base ​

Retouren ​

Voorbeelden ​

interactionEnabled ​

Standaard ​

markerStyleMap? ​

Standaardwaarde ​

Voorbeeld ​

maxZoom ​

Standaard ​

minFitScale? ​

minLabelFontSize? ​

Standaard ​

minZoom ​

Standaard ​

nodeStyleMap? ​

Opmerkingen ​

Voorbeeld ​

nodeTypeAccessor()? ​

Parameters ​

node ​

Retouren ​

Opmerkingen ​

Voorbeeld ​

renderCluster()? ​

Parameters ​

cluster ​

Retouren ​

Voorbeeld ​

renderLabel()? ​

Parameters ​

edge ​

Retouren ​

Voorbeeld ​

renderNode()? ​

Parameters ​

node ​

Retouren ​

Voorbeeld ​

selectionBox ​

type ​

Interface: GraphRendererOptions

Eigenschappen

beforeRender()

Parameters

graph

Retouren

defaultEdgeStyle

Standaardwaarde

defaultLabelStyle

Standaardwaarde

defaultNodeStyle

Standaardwaarde

detailTransition?

Standaard

dragEnabled

Standaard

edgeStyleMap?

Opmerkingen

Voorbeeld

edgeTypeAccessor()?

Parameters

edge

Retouren

Opmerkingen

Voorbeeld

enableFocusMode

Standaard

enableNodeExpansion

Standaard

fitAnchor?

focusTierTrigger?

Standaard

groupOutline()?

Parameters

group

Retouren

groupStyle()?

Parameters

group

base

Retouren

Voorbeelden

interactionEnabled

Standaard

markerStyleMap?

Standaardwaarde

Voorbeeld

maxZoom

Standaard

minFitScale?

minLabelFontSize?

Standaard

minZoom

Standaard

nodeStyleMap?

Opmerkingen

Voorbeeld

nodeTypeAccessor()?

Parameters

node

Retouren

Opmerkingen

Voorbeeld

renderCluster()?

Parameters

cluster

Retouren

Voorbeeld

renderLabel()?

Parameters

edge

Retouren

Voorbeeld

renderNode()?

Parameters

node

Retouren

Voorbeeld

selectionBox

type