Gibt an, wie lange es in Millisekunden dauert, bis eine Zeichnung in das Diagramm ein- oder ausgeblendet wird, wenn durch den Zoom verändert wird, was es wert ist, gezeichnet zu werden. 0 führt jede solche Änderung in einem einzigen Frame durch, was bei einem Diagramm der Fall ist, das keinen Übergang angibt.

Es deckt einen Knoten ab, der zwischen seinen NodeStyle.tiers, seinen NodeStyle.focusTier ankommenden und verlassenden Zeichnungen wechselt, und einem Label, das GraphRendererOptions.minLabelFontSize kreuzt. Eine ausgehende Zeichnung bleibt auf einer eigenen Ebene am Leben und die beiden verschwinden aneinander vorbei, so dass während des Austauschs nie ein Knoten fehlt – er wird nur dort, wo sie sich überlappen, kurzzeitig weicher.

Jeder Knoten auf dem Bildschirm überschreitet gleichzeitig einen Schwellenwert, sodass so viele Überblendungen ausgelöst werden, wie sich Knoten ändern. prefers-reduced-motion schaltet es aus.

Gemessen an 210 Knoten, von denen jeder eine 140x44-Karte enthält: Die Überblendung selbst kostet nichts – die Arbeitsfläche hält über ihre gesamte Länge 60 fps –, aber wenn man so viele ausgehende Karten für einen Moment am Leben hält, kommen etwa 26 ms zu dem einen Frame hinzu, den die Kreuzung bereits verbraucht. Stellen Sie es auf 0 in einem Diagramm ein, in dem dieser Rahmen wichtiger ist als der Übergang.

Standardwert

dragEnabled

dragEnabled: boolean

Definiert in: interfaces/RendererOptions.ts:313

Standardwert

true

edgeStyleMap?

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

Definiert in: interfaces/RendererOptions.ts:223

Ordnet Kantenarten ihren Stilen zu.

Jeder Schlüssel ist ein Kantentyp (wie von edgeTypeAccessor zurückgegeben) und wird einem partiellen EdgeStyle zugeordnet. Die eigene Kante styleCb gewinnt immer noch über die Karte, genau wie sie es über nodeStyleMap tut.

Bemerkungen

Wird in Verbindung mit edgeTypeAccessor verwendet

Beispiel

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

edgeTypeAccessor()?

optional edgeTypeAccessor: (edge) => string | undefined

Definiert in: interfaces/RendererOptions.ts:204

Funktion zum Zugreifen auf die Art einer Kante – die Dimension edgeStyleMap Schlüssel auf, und diejenige, von der ein edge Legendenabschnitt und Kantenfilterfacetten abgeleitet werden, wenn ihnen kein eigener Datenschlüssel zugewiesen wird.

Parameter

edge

Edge

Rückgabewert

string | undefined

Bemerkungen

Wird in Verbindung mit edgeStyleMap verwendet

Beispiel

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

enableFocusMode

enableFocusMode: boolean

Definiert in: interfaces/RendererOptions.ts:228

Steuert, ob nicht verbundene Knoten und Kanten ausgegraut werden, wenn ein Knoten ausgewählt wird

Standardwert

true

enableNodeExpansion

enableNodeExpansion: boolean

Definiert in: interfaces/RendererOptions.ts:234

Steuert, ob Knoten erweitert oder reduziert werden können, um ihre untergeordneten Knoten anzuzeigen. false entfernt außerdem den Chevron, die Verknüpfung Enter und den gestrichelten, minimierten Umriss.

Standardwert

true

fitAnchor?

optional fitAnchor: string

Definiert in: interfaces/RendererOptions.ts:311

Der Knoten, auf dem eine Anpassung bei minFitScale zentriert ist, durch id; Die Gruppe eines gefalteten Knotens steht dafür. Die Ansicht stoppt an den Rändern des Inhalts, sodass sich ein Anker in der Nähe dieser Seite der Arbeitsfläche befindet. Ungesetzt oder nicht gezeichnet, die Passform konzentriert sich auf den Inhalt.

focusTierTrigger?

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

Definiert in: interfaces/RendererOptions.ts:245

Wenn die Zeichnung NodeStyle.focusTier eines Knotens ausgelöst wird. Der Stil sagt aus, was der Schwerpunkt der Zeichnung ist; Hier steht wann.

Die Auswahl befördert nur einen Knoten, der einzeln ausgewählt ist – eine Boxauswahl von fünfzig würde eine Wand aus überlappenden Karten ergeben. 'off' unterdrückt das Verhalten, ohne den Stil zu bearbeiten, was ein Integrator benötigt, der die Voreinstellungen einer anderen Person einbettet.

Standardwert

'both'

groupOutline()?

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

Definiert in: interfaces/RendererOptions.ts:173

Was der Chip über einer offenen Gruppe anstelle seiner Beschriftung anzeigt. Eine Zeichenfolge wird als Text angezeigt. Der Chip behält seine Schließmarkierung und klappt die Gruppe beim Klicken trotzdem zurück. Geben Sie nichts zurück, um das Etikett zu behalten.

Parameter

group

GroupInfo

Rückgabewert

string | void | HTMLElement

groupStyle()?

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

Definiert in: interfaces/RendererOptions.ts:167

Das Aussehen einer von UI.simplify erstellten Gruppe, überlagert über die Standardeinstellung: eine Scheibe in der Farbe des Typs in einem Ring, die Zählung auf der Scheibe, sobald Platz ist, die Beschriftung darunter. Eine Gruppe wird als Knoten gezeichnet, sodass tiers, focusTier, html, shape und badges wie bei einem Knoten funktionieren. Geben Sie nichts zurück, um die Standardeinstellung beizubehalten.

base ist der Stil, den die Bibliothek zeichnen würde. Was Sie zurückgeben, ersetzt seine Schlüssel. Um also beim Hinzufügen einer Stufe die Zählung auf der Scheibe beizubehalten, verteilen Sie base.tiers.

Parameter

group

GroupInfo

base

Readonly<Partial<NodeStyle>>

Rückgabewert

void | Partial<NodeStyle>

Beispiele

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

Definiert in: interfaces/RendererOptions.ts:315

Standardwert

true

markerStyleMap?

optional markerStyleMap: MarkerStyleMap

Definiert in: interfaces/RendererOptions.ts:135

Definiert benutzerdefinierte Stile für im Diagramm verwendete Markierungsformen.

Jeder Schlüssel ist ein Markierungstyp (z. B. 'diamond', 'arrow') und wird einem MarkerStyle-Objekt zugeordnet.

Standardwert

defaultMarkerStyleMap

Beispiel

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

maxZoom

maxZoom: number

Definiert in: interfaces/RendererOptions.ts:299

Standardwert

minFitScale?

optional minFitScale: number

Definiert in: interfaces/RendererOptions.ts:305

Der niedrigste Maßstab, auf den eine Anpassung verkleinert wird. Inhalte, die weniger benötigen würden, werden in diesem Maßstab angezeigt, zentriert auf fitAnchor und verlaufen über die Arbeitsflächeränder hinaus. Nicht eingestellt, eine Anpassung zeigt immer alles. Eine explizite Skala, die an fitAndCenter übergeben wird, ignoriert es.

minLabelFontSize?

optional minLabelFontSize: number

Definiert in: interfaces/RendererOptions.ts:284

Die gerenderte Schriftgröße in CSS Pixeln, unterhalb derer keine Beschriftung gezeichnet wird.

Eine Beschriftung bewegt sich auf dem Diagramm und skaliert mit ihm, so dass es sich ab einem bestimmten Zoom um Text handelt, den niemand mehr lesen kann – und bei einem Diagramm, das groß genug ist, um verkleinert geöffnet zu werden, jedes Etikett auf einmal. Unterhalb dieser Größe zeichnet die Bibliothek keine davon, wodurch sie auch aus dem Durchgang herausgenommen werden, der bei jedem Simulationstick eine Beschriftung neu positioniert.

Eine Zahl für die gesamte Arbeitsfläche: die Beschriftung einer Kante und eines Knotens gleichermaßen. Der Unterschied zwischen ihnen ergibt sich bereits aus der Schriftgröße, da die Beschriftung eines Knotens von seiner Größe abgeleitet wird – ein großer Knoten behält seine Beschriftung länger als ein kleiner.

0 zeichnet jede Beschriftung bei jedem Zoom.

Standardwert

minZoom

minZoom: number

Definiert in: interfaces/RendererOptions.ts:297

Standardwert

0.05

nodeStyleMap?

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

Definiert in: interfaces/RendererOptions.ts:190

Ordnet Knotentypen ihren Stilen zu.

Jeder Schlüssel ist ein Knotentyp (wie von nodeTypeAccessor zurückgegeben) und wird einem NodeStyle-Objekt zugeordnet.

Bemerkungen

Wird in Verbindung mit nodeTypeAccessor verwendet

Beispiel

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

nodeTypeAccessor()?

optional nodeTypeAccessor: (node) => string | undefined

Definiert in: interfaces/RendererOptions.ts:148

Funktion zum Zugriff auf den Typ eines Knotens. Verwendet in

Wird verwendet, um Knoten basierend auf ihrem Typ zu formatieren.

Parameter

node

Node

Rückgabewert

string | undefined

Bemerkungen

Wird in Verbindung mit nodeStyleMap verwendet

Beispiel

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

renderCluster()?

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

Definiert in: interfaces/RendererOptions.ts:104

Benutzerdefinierter Renderer für Cluster.

Ermöglicht die vollständige Kontrolle darüber, wie ein Cluster angezeigt wird. Die Funktion kann Folgendes zurückgeben:

Eine HTMLElement, die als Cluster verwendet werden soll, oder
Eine Zeichenfolge, die innerhalb des Clusters gerendert werden soll

Parameter

cluster

Node

Rückgabewert

string | void | HTMLElement

Beispiel

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

Definiert in: interfaces/RendererOptions.ts:77

Benutzerdefinierter Renderer für Kantenbeschriftungen.

Ermöglicht die vollständige Kontrolle darüber, wie Kantenbeschriftungen angezeigt werden. Die Funktion kann entweder Folgendes zurückgeben:

Eine HTMLElement, die als Beschriftung der Kante verwendet werden soll, oder
Eine Zeichenfolge, die innerhalb des Etiketts gerendert werden soll

Parameter

edge

Edge

Rückgabewert

string | void | HTMLElement

Beispiel

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

Definiert in: interfaces/RendererOptions.ts:52

Benutzerdefinierter Renderer für Knoten.

Ermöglicht die vollständige Kontrolle darüber, wie ein Knoten angezeigt wird. Die Funktion kann Folgendes zurückgeben:

Eine HTMLElement, die als Knoten verwendet werden soll,
Eine Zeichenfolge, die innerhalb des Knotens gerendert werden soll, oder
nichts, um diesen Knoten der normalen Styling-Pipeline zu überlassen

Eine hier zurückgegebene Karte ist der Knoten: Dahinter wird keine Form, kein Symbol, kein Bild oder keine Beschriftung gezeichnet, und ihre gemessene Größe bestimmt den Kollisionsradius und die Kantenanker. Wenn Sie für einen Knoten nichts zurückgeben, erhalten Sie stattdessen wie üblich seinen nodeStyleMap-Eintrag, seine Form und seine Beschriftung – so können einige Knoten statt aller Knoten kartiert werden.

Für eine Karte, die sich mit dem Rest der Styling-Kette zusammensetzt, deklarieren Sie stattdessen NodeStyle.html mit shape: 'none'; Es wird pro Typ oder pro Knoten aufgelöst, wobei dieser global ist.

Parameter

node

Node

Rückgabewert

string | void | HTMLElement

Beispiel

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

Definiert in: interfaces/RendererOptions.ts:316

type

type: RendererType

Definiert in: interfaces/RendererOptions.ts:15

Definiert die vom Diagramm verwendete Rendering-Methode.

zoomAnimation

zoomAnimation: boolean

Definiert in: interfaces/RendererOptions.ts:293

Standardwert

true

zoomAnimationDuration

zoomAnimationDuration: number

Definiert in: interfaces/RendererOptions.ts:295

Standardwert

zoomEnabled

zoomEnabled: boolean

Definiert in: interfaces/RendererOptions.ts:291

Standardwert

true

Interface: GraphRendererOptions ​

Eigenschaften ​

beforeRender() ​

Parameter ​

graph ​

Rückgabewert ​

defaultEdgeStyle ​

Standardwert ​

defaultLabelStyle ​

Standardwert ​

defaultNodeStyle ​

Standardwert ​

detailTransition? ​

Standardwert ​

dragEnabled ​

Standardwert ​

edgeStyleMap? ​

Bemerkungen ​

Beispiel ​

edgeTypeAccessor()? ​

Parameter ​

edge ​

Rückgabewert ​

Bemerkungen ​

Beispiel ​

enableFocusMode ​

Standardwert ​

enableNodeExpansion ​

Standardwert ​

fitAnchor? ​

focusTierTrigger? ​

Standardwert ​

groupOutline()? ​

Parameter ​

group ​

Rückgabewert ​

groupStyle()? ​

Parameter ​

group ​

base ​

Rückgabewert ​

Beispiele ​

interactionEnabled ​

Standardwert ​

markerStyleMap? ​

Standardwert ​

Beispiel ​

maxZoom ​

Standardwert ​

minFitScale? ​

minLabelFontSize? ​

Standardwert ​

minZoom ​

Standardwert ​

nodeStyleMap? ​

Bemerkungen ​

Beispiel ​

nodeTypeAccessor()? ​

Parameter ​

node ​

Rückgabewert ​

Bemerkungen ​

Beispiel ​

renderCluster()? ​

Parameter ​

cluster ​

Rückgabewert ​

Beispiel ​

renderLabel()? ​

Parameter ​

edge ​

Rückgabewert ​

Beispiel ​

renderNode()? ​

Parameter ​

node ​

Rückgabewert ​

Beispiel ​

selectionBox ​

type ​

Interface: GraphRendererOptions

Eigenschaften

beforeRender()

Parameter

graph

Rückgabewert

defaultEdgeStyle

Standardwert

defaultLabelStyle

Standardwert

defaultNodeStyle

Standardwert

detailTransition?

Standardwert

dragEnabled

Standardwert

edgeStyleMap?

Bemerkungen

Beispiel

edgeTypeAccessor()?

Parameter

edge

Rückgabewert

Bemerkungen

Beispiel

enableFocusMode

Standardwert

enableNodeExpansion

Standardwert

fitAnchor?

focusTierTrigger?

Standardwert

groupOutline()?

Parameter

group

Rückgabewert

groupStyle()?

Parameter

group

base

Rückgabewert

Beispiele

interactionEnabled

Standardwert

markerStyleMap?

Standardwert

Beispiel

maxZoom

Standardwert

minFitScale?

minLabelFontSize?

Standardwert

minZoom

Standardwert

nodeStyleMap?

Bemerkungen

Beispiel

nodeTypeAccessor()?

Parameter

node

Rückgabewert

Bemerkungen

Beispiel

renderCluster()?

Parameter

cluster

Rückgabewert

Beispiel

renderLabel()?

Parameter

edge

Rückgabewert

Beispiel

renderNode()?

Parameter

node

Rückgabewert

Beispiel

selectionBox

type