Renderoptionen

Mit Pivotick können Sie über die Option render anpassen, wie Knoten, Kanten und Beschriftungen gerendert werden.

Warnung

Alle hier definierten Stile gelten nur, wenn render.type auf svg gesetzt ist.

Option	Typ	Standardwert	Beschreibung
type	'svg' | 'canvas'	'svg'	Die Rendering-Methode. 'svg' verwendet SVG Elemente, 'canvas' verwendet die HTML Arbeitsfläche (experimentell – nicht vollständig implementiert).
renderNode	(node: Node) => HTMLElement | string | void	undefined	Benutzerdefinierter Renderer für Knoten.
renderLabel	(edge: Edge) => HTMLElement | string | void	undefined	Benutzerdefinierter Renderer für Kantenbeschriftungen.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Standardstil wird auf alle Knoten angewendet.
defaultEdgeStyle	EdgeStyle	defaultEdgeStyle	Standardstil wird auf alle Kanten angewendet.
defaultLabelStyle	LabelStyle	defaultLabelStyle	Standardstil, der auf alle Kantenbeschriftungen angewendet wird.
markerStyleMap	Record<string, MarkerStyle>	defaultMarkerStyle	Benutzerdefinierte Stile für Kantenmarkierungen ('arrow', 'diamond' usw.). Siehe MarkerStyle
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Funktion zum Zugriff auf den Typ eines Knotens, verwendet mit nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Ordnet Knotentypen (von nodeTypeAccessor) Stilen zu.
edgeTypeAccessor	(edge: Edge) => string | undefined	undefined	Die Art einer Kante, verwendet mit edgeStyleMap und als Layer-Schlüssel.
edgeStyleMap	Record<string, Partial<EdgeStyle>>	undefined	Ordnet Kantenarten (von edgeTypeAccessor) Stilen zu. Siehe Randschichten.
minZoom	number	0.1	Minimale Zoomstufe.
maxZoom	number	10	Maximale Zoomstufe.
minFitScale	number	undefined	Der niedrigste Zoom, zu dem eine Anpassung geht. Bei diesem Zoom wird ein Diagramm geöffnet, das zu groß ist, um darauf zu passen, zentriert auf fitAnchor, und der Rest wird auf der Minikarte angezeigt.
fitAnchor	string	undefined	ID des Knotens, auf dem sich eine bei minFitScale gehaltene Anpassung konzentriert. Die Ansicht stoppt an den Rändern des Diagramms, sodass ein Anker auf einer Seite in der Nähe dieser Seite bleibt.
zoomEnabled	boolean	true	Zoom aktivieren. false übernimmt auch die Zoom-Schaltflächen der Ansichtsfensterschiene und sorgt so dafür, dass sie immer passend und zentriert sind.
selectionBox	SelectionBox	undefined	Bereichsauswahl: enabled: false legt den Ziehrahmen und das Werkzeug Auswählen ▸ Lasso ab.
enableNodeExpansion	boolean	true	Erweitern eines Clusters: false übernimmt den Chevron, die Abkürzung Enter und den gestrichelten, eingeklappten Umriss. Ein ausgewähltes Kind beleuchtet weiterhin seinen geschlossenen Cluster.

Art der Darstellung

Tipp

Pivotick gibt Ihnen flexible Kontrolle über das Rendering, von einfachen Standardeinstellungen bis hin zu vollständig benutzerdefiniertem Rendering. Hier ein kurzer Überblick:

• Mit renderNode und renderLabel können Sie die Darstellung von Knoten und Beschriftungen vollständig anpassen (Sie können HTML oder Text zurückgeben).
• defaultNodeStyle.html (pro Knoten oder pro Typ) ist die gleiche Notluke innerhalb der Styling-Kette – siehe HTML Knoten.
• nodeTypeAccessor + nodeStyleMap ermöglichen dynamisches Styling basierend auf dem Typ jedes Elements.
• defaultNodeStyle, defaultEdgeStyle und defaultLabelStyle definieren das Grundaussehen aller Elemente.
• edgeTypeAccessor + edgeStyleMap sind die Kantengegenstücke und dienen gleichzeitig als Schlüssel zum Ausschalten einer Beziehungsebene – siehe Kantenebenen.

Ihre Karte wird vermessen, egal welche Form sie hat

Pivotick misst, was Sie zurückgeben, um die Größe von <foreignObject> zu bestimmen und den Kollisionsradius des Kraftlayouts einzugeben. Die Karte wird in einer bibliothekseigenen Schrumpfbox vermessen, Sie müssen also nicht die Größe Ihres Stammverzeichnisses selbst anpassen: width: 100% darauf wird anhand seines eigenen Inhalts und nicht anhand des Platzhalters aufgelöst.

Die nächsten drei Rendering-Beispiele verwenden die folgenden Daten:

const data = {
    nodes: [
        { id: 1, data: { label: 'A', type: 'hub' } },
        { id: 2, data: { label: 'B', type: 'spoke' } }
    ],
    edges: [{ from: 1, to: 2 }]
}

Standard-Rendering

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'circle',
            color: '#007acc',
            size: 12,
            strokeColor: '#fff',
            strokeWidth: 2,
            fontFamily: 'system-ui',
            textColor: '#fff'
        },
        defaultEdgeStyle: {
            markerStart: (edge: Edge) => edge.getData().mstart,
            markerEnd: 'arrow',
            curveStyle: 'straight',
        },
    }
}

Map-Accessor-Rendering

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.type,
        nodeStyleMap: {
            'hub': {
                shape: 'hexagon',
                color: '#f90',
                size: 25,
                text: (node) => node.getData()?.label
            },
            'spoke': {
                shape: 'triangle',
                color: '#09f'
            }
        },
    },
    UI: {
        mode: 'static'
    }
}

Benutzerdefiniertes Callback-Rendering

const options = {
    render: {
        renderNode: (node: Node): HTMLElement | string | void => {
            const size = 12
            const color = '#09f'
            const style = [
                'display: block',
                `width: ${size}px`,
                `height: ${size}px`,
                `background-color: ${color}`,
                'border: 2px solid #fff',
                'border-radius: 50%',
                'opacity: 1',
            ].join(';')

            return `<span style="${style}"></span>`
        }
    }
}

Beispiel für das Map-Accessor-Rendering

HTML Knoten

Wenn keine Kombination aus shape, color, icon und text ausreicht, geben Sie dem Renderer etwas Markup. Es gibt zwei Möglichkeiten, und der Unterschied besteht nur darin, wo sie deklariert werden:

	Deklariert am	Erreicht
NodeStyle.html	defaultNodeStyle, nodeStyleMap[type], der eigene Stil eines Knotens, eine styleCb-Rückgabe	ein Typ oder ein Knoten
render.renderNode	die Renderer-Optionen	jeder Knoten, vor der Styling-Kette

html ist derjenige, nach dem man zuerst greifen muss: Es handelt sich um einen gewöhnlichen Stilkanal, daher wird er über die gleiche Prioritätskette wie color oder shape aufgelöst, und eine Karte kann einem Knotentyp gegeben werden, während der Rest seine Form behält.

const options = {
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            // A card, and nothing else: `shape: 'none'` is what makes it the whole node.
            service: {
                shape: 'none',
                html: (node) => {
                    const card = document.createElement('div')
                    card.className = 'my-service-card'
                    card.textContent = node.getData()?.name
                    return card
                },
            },
            // Same graph, ordinary shapes.
            host: { shape: 'circle', size: 18, color: '#0891b2' },
        },
    },
}

shape: 'none'

Ohne sie wird die Form immer noch hinter Ihrer Karte gezeichnet und size ist die kleinste Größe, die der Knoten haben darf – was Sie für eine Karte wünschen, die auf einer farbigen Scheibe liegt, und nicht für eine Karte, die den Knoten darstellt. shape: 'none' zeichnet keine Form und übergibt stattdessen den Kollisionsradius und die Kantenanker des Knotens an die Karte.

Es ist ein Formwert wie jeder andere, also setzt er sich wie folgt zusammen: Ein Nur-Beschriftungs-Knoten ist shape: 'none' mit einer text und keiner Karte, und ein Nur-Symbol-Knoten ist shape: 'none' mit einer iconClass. Ein formloser Knoten ohne jeglichen Inhalt ist unsichtbar – aber immer noch da, immer noch ziehbar und immer noch über 2 × size auswählbar.

Was eine Karte nicht ausschaltet

text ist ein separater Kanal, daher werden eine Karte und eine Knotenbezeichnung zusammen gezeichnet. Wenn Ihre Karte einen eigenen Titel trägt, setzen Sie text: '' – ein geerbter Wert kann nicht mit undefined gelöscht werden, was zu dem führt, was auch immer in der Stilkarte angegeben ist.

Größenbestimmung

Ihre Karte wird gemessen und der Knoten wächst bis zu ihr heran, sodass sie nie abgeschnitten wird, die Kollisionskraft die echten Karten auf Abstand hält und Kanten auf dem Rand der Karte landen und nicht auf einem Kreis um sie herum. Sie müssen nichts tun, damit das funktioniert – die Rückgabe einer width: 100%-Wurzel ist in Ordnung, da die Messung innerhalb einer Schrumpfbox erfolgt.

Zwei wissenswerte Konsequenzen:

• Die Messung ist asynchron (eine Karte kann nicht gemessen werden, bevor sie auf dem Bildschirm angezeigt wird), sodass der Radius eines Knotens für das erste oder die ersten Frames mit size versehen ist und dann zum Radius der Karte wird. Das Layout wird einmal verschoben, wenn das landet.
• Eine Karte wird einmal beim Rendern gemessen. Wenn sich die Größe seines Inhalts später von selbst ändert, rendern Sie den Knoten erneut, um ihn neu zu messen.

Nur einige Knoten kardieren

Beide Rückrufe können nothing für einen Knoten zurückgeben, wodurch dieser Knoten wie gewohnt an die Styling-Kette zurückgegeben wird – Form, Style-Map-Eintrag, Symbole und Beschriftung. Ein einzelnes globales renderNode kann also die Knoten kartieren, die eines verdienen:

renderNode: (node) => node.getData()?.featured ? buildCard(node) : undefined

Nur vertrauenswürdiges Markup

Was auch immer Sie zurückgeben, wird unverändert eingefügt. Erstellen Sie es mit textContent oder maskieren Sie es – interpolieren Sie keine Knotendaten in eine Markup-Zeichenfolge. Siehe den Sicherheitsleitfaden.

Vollständige Knotenbeschriftungen

Eine Knotenbeschriftung, die länger als der Raum ist, den sie hat, wird durch ein mittleres Auslassungszeichen (Supe…abel) gekürzt. Legen Sie textTruncate: false fest, um es stattdessen vollständig zu zeichnen – standardmäßig, pro Knotentyp oder pro Knoten:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: false },
    },
}

Dazwischen begrenzt textMaxWidth die Beschriftung auf eine von Ihnen gewählte Breite in Diagrammeinheiten (CSS Pixel bei Zoom 1) und nicht auf den Raum, den der Knoten ihr gibt. Ein passendes Etikett wird vollständig gezeichnet, ein längeres Etikett wird mit mittleren Auslassungspunkten auf diese Breite gekürzt:

const options = {
    render: {
        defaultNodeStyle: { textTruncate: true, textMaxWidth: 160 },
    },
}

Schriftgröße der Beschriftung

Eine Knotenbeschriftung wird standardmäßig bei max(12, size × 0.45) gezeichnet, sodass sie mit dem Knoten wächst. Wenn ein Knoten eher für das, was er zeichnet, als für seine Bedeutung groß ist, wie z. B. eine Miniaturansicht eines Bildes, legen Sie textFontSize (Grafikeinheiten) fest, damit seine Beschriftung mit seinen Nachbarn übereinstimmt:

const options = {
    render: {
        nodeStyleMap: {
            image: { size: 80, imagePath: (node) => node.getData()?.url, textFontSize: 12 },
        },
    },
}

Das Etikett befindet sich immer noch direkt neben dem Knoten, das integrierte Budget bezieht seine Breite immer noch vom Knoten (so dass eine kleinere Schriftart mehr Zeichen passt) und das Zoom-Gate beurteilt es anhand der von Ihnen festgelegten Größe.

Die Kappe skaliert wie der Rest des Knotens mit dem Zoom und kann eine Funktion des Knotens sein. Es wird ignoriert, wenn textTruncate false ist.

Eine vollständige oder geschlossene Beschriftung reicht in der Regel über die Form des Knotens hinaus, daher wird sie auf demselben thematischen Block wie eine schwebende Beschriftung gezeichnet, um auf der Arbeitsfläche lesbar zu bleiben. Kombinieren Sie es mit textVerticalShift: 1 (oder textHorizontalShift), um die gesamte Beschriftung vom Knoten zu entfernen. Kantenbeschriftungen werden niemals abgeschnitten.

text ist eine Bezeichnung auf einem Knoten, kein Ersatz dafür. Ein Knoten, dessen Text ist, sollte als Knoten gezeichnet werden, über html, renderNode oder eine Stufe – das sind die Zeichnungen des Knotens, und der Zoom behält sie bei, egal minLabelFontSize funktioniert mit Etiketten.

Knotenabzeichen

Wenn ein Diagramm nützlich ist, tragen color, shape, size und iconClass normalerweise alle etwas. badges ist ein eigener Kanal – kleine Indikatoren, die am Rand des Knotens befestigt sind und keinen der anderen ausgeben:

const options = {
    render: {
        defaultNodeStyle: {
            badges: (node) => {
                const { notes, disputed } = node.getData()
                return [
                    notes && { text: String(notes), color: '#2563eb', title: `${notes} notes` },
                    disputed && { iconClass: 'fa fa-exclamation', color: '#b94a48', title: 'Disputed' },
                ].filter(Boolean)
            },
        },
    },
}

Geben Sie einem Abzeichen text (eine Anzahl oder ein oder zwei Zeichen), ein iconClass, iconUnicode oder svgIcon und ein title für den nativen Tooltip. text gewinnt, wenn Sie beides liefern. Längerer Text lässt das Abzeichen zu einer Pille wachsen und nach drei Zeichen wird 99+ gerendert.

Wohin sie gehen

Lassen Sie position weg und Abzeichen füllen die freien Ecken im Uhrzeigersinn ab 'ne'. Nennen Sie eines ('ne' | 'nw' | 'se' | 'sw') und es wird wörtlich gewürdigt, Überschneidungen eingeschlossen.

Vier passen auf einen einfachen Knoten, zwei auf einen mit untergeordneten Knoten. Das Steuerelement zum Erweitern/Reduzieren befindet sich im Nordosten, wenn ein Knoten reduziert ist, und im Südosten, wenn er erweitert ist, sodass auf jedem erweiterbaren Knoten beide die östlichen Ecken reserviert sind – andernfalls würde jedes Abzeichen die Ecke ändern, sobald ein Cluster geöffnet wird. Abzeichen, die über das hinausgehen, was hineinpasst, werden zu einer +n zusammengefaltet, deren Tooltip sie benennt.

Abzeichen skalieren mit dem Knoten zwischen Boden und Decke, sodass sie auf einem kleinen Knoten lesbar bleiben, ohne auf einem großen anzuschwellen, und sie sitzen auf dem eigentlichen Rand der Form – der Ecke eines Quadrats oder eines gerahmten Bildes, dem 45°-Punkt eines Kreises.

Klicks

Ein Badge kann auf Treffer getestet werden, ist aber standardmäßig transparent: Ohne Handler fällt sein Klick durch und wählt den darunter liegenden Knoten aus, sodass ein Badge nie ein toter Punkt ist.

{ text: '3', onClick: (event, node, badge) => openNotes(node) }

Geben Sie einem Abzeichen eine onClick – oder deklarieren Sie callbacks.onBadgeClick für das Verhalten, das sie alle teilen – und es übernimmt den Zeigercursor und verbraucht seinen Klick, sodass der Knoten nicht ausgewählt wird. Beide feuern, derjenige des Abzeichens zuerst. Durch Drücken eines Badges wird der Knoten immer noch in eine Richtung gezogen, und ein badgeClick Listener auf dem Interaktionsbus kann cancel() beides.

Umfang

Abzeichen beschreiben nur den Knoten, auf dem sie sitzen. Ein kollabierter Cluster aggregiert nicht die untergeordneten Werte – walk node.children in Ihrer eigenen badges-Funktion, wenn Sie das möchten, da nur Sie wissen, ob eine Tatsache summiert, gewinnt oder keines von beidem.

Detail, das dem Zoom folgt

Eine Zeichnung, die sich aus der Nähe gut lesen lässt, ist auf einer Übersicht nicht lesbar, und ein Punkt, der in eine Übersicht passt, kann nicht sagen, was sie ist. tiers lässt einen Knoten mehrere Zeichnungen tragen und wählt zwischen ihnen aus, je nachdem, wie groß der Knoten aktuell rendert.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [
                // Small: a coloured dot.
                { width: 32, height: 32, style: { shape: 'circle', size: 16 } },
                // Once there is room for it: a labelled chip.
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

Die kleinsten Ränge werden zuerst sortiert und der reichste, der passt, gewinnt. Wenn dies nicht der Fall ist, zeichnet der Knoten seinen Basisstil, sodass der Stil, den Sie bereits haben, der Boden ist: Ein Diagramm, das no tiers deklariert, bleibt in jeder Hinsicht davon unberührt.

Was für eine Stufe erbt

Eine Ebene wird über dem Basisstil zusammengeführt, sodass ein Kanal, den sie nicht benennt, vererbt wird. Die Zeichnung ist die Ausnahme: iconUnicode, iconClass, svgIcon, imagePath und html sind ein Platz, daher ersetzt eine Stufe, die einen von ihnen benennt, die Zeichnung der Basis (und ihre imageFit) vollständig. Eine ruhende Glyphe mit einer Kartenstufe benötigt nichts weiter als die Karte:

const options = {
    render: {
        defaultNodeStyle: {
            svgIcon: buildGlyph,
            tiers: [
                { width: 140, height: 44, style: { shape: 'none', html: buildChip } },
            ],
        },
    },
}

Eine Stufe, die keine Zeichnung benennt, sondern beispielsweise nur size, color oder text, behält die Glyphe der Basis.

Um einen Kanal zu entfernen, den die Stufe sonst nicht ersetzt, setzen Sie ihn auf null, was bedeutet, dass die Stufe diesen überhaupt nicht zieht. strokeColor: null lässt beispielsweise den Umriss der Basis fallen. undefined kann nicht einspringen: es bedeutet „Ich nenne diesen Kanal nicht“, und genau so bleibt der Wert der Basis erhalten.

Dies ist die einzige Ebene, bei der null auf diese Weise funktioniert. Überall sonst in der Stilkette fällt null immer noch in die darunter liegende Ebene durch, da ein styleCb, das eine Null direkt aus den Knotendaten zurückgibt, eine gewöhnliche Form ist und immer „Standard verwenden“ bedeutete.

Um einen Knoten formlos zu machen, verwenden Sie shape: 'none', anstatt shape zu löschen.

Was wählt eine Stufe aus?

Die gerenderte Größe: der Footprint des Knotens in CSS Pixeln, also footprint × zoom. Eine Ebene wird aktiviert, sobald sie ihren Wert von minRenderedSize erreicht, der standardmäßig auf den eigenen Wert von width der Ebene eingestellt ist. Daher lautet { width: 140 } „Einschalten, sobald Platz zum Zeichnen von 140 Pixeln Knoten vorhanden ist“.

Der Zoomfaktor allein reichte nicht aus. Es vervielfacht die Koordinaten des erfundenen Layouts, sodass der gleiche Maßstab eine andere scheinbare Größe in einem anderen Diagramm bedeutet und ein auf einen Datensatz abgestimmter Schwellenwert im nächsten falsch wäre.

Eine aktivierte Ebene bleibt bestehen, bis die gerenderte Größe auf 85 % ihres Schwellenwerts fällt. Jeder Knoten hat einen gemeinsamen Schwellenwert, sodass ohne dieses Band eine auf einem Knoten geparkte Arbeitsfläche als Ganzes flackern würde.

Der Fußabdruck bleibt erhalten

Die Box, die ein Knoten im Layout reserviert, ändert sich nicht, wenn seine Zeichnung dies tut. Sie beträgt layoutSize und ist standardmäßig auf die Hälfte der breitesten deklarierten Ebene eingestellt. Durch die Deklaration von Ebenen erhält das Diagramm also den richtigen Abstand ohne eine zweite Zahl. Wenn eine Ebene ausgetauscht wird, bewegt sich nichts: Die Zeichnung ändert sich in einem Feld, das bereits die richtige Größe hatte, und die Streitkräfte bemerken den Unterschied nie.

Aus dem gleichen Grund werden width und height deklariert und nicht gemessen. Das Layout muss den Footprint vor dem ersten Tick kennen und eine vermessene Karte meldet ihre Größe erst, wenn sie gezogen wurde.

Stellen Sie layoutSize selbst ein, um das Diagramm enger oder breiter als die breiteste Ebene anzuordnen. Beachten Sie, dass eine Ebene nur dann in ihrer Entwurfsgröße gezeichnet wird, wenn ihre Breite der Grundfläche entspricht; ein schmalerer greift proportional früher ein und wird proportional kleiner gezeichnet. Geben Sie ein explizites minRenderedSize ein, wenn das wichtig ist.

Die Fokuszeichnung

focusTier ist die Zeichnung, die ein Knoten verwendet, während er mit der Maus darüber bewegt wird, oder wenn er einzeln ausgewählt wird, unabhängig vom Zoom. Hier sagt ein Knoten alles über sich selbst aus. Wenn man also einen Knoten liest, bedeutet dies nie, dass man darauf zoomen muss.

const options = {
    render: {
        defaultNodeStyle: {
            tiers: [/* … */],
            focusTier: { shape: 'none', html: buildDetailCard },
        },
    },
}

Es verschmilzt über den Basis-Stil des Knotens und nicht über die aktive Ebene, sodass shape oder html einer Chipebene nicht in den Knoten eindringen können. Die Größe bleibt auf dem Bildschirm konstant: Die Zeichnung wird im Vergleich zum Zoom skaliert, sodass eine 280×150-Karte 280×150 CSS Pixel hat, egal wie weit das Diagramm entfernt ist. Und es berührt nie die Geometrie des Knotens, sodass Kanten weiterhin auf der Ebene darunter landen und beim Schweben nichts bewegt wird.

Die Fokuszeichnung trägt die Abzeichen des Knotens auf einem eigenen Rand, in der gleichen Bildschirmgröße wie die Karte. Die eigenen Abzeichen des Knotens werden ausgeblendet, während er angezeigt wird, sodass keines zweimal gezeichnet wird. Geben Sie focusTier ein eigenes badges, um einen anderen Satz auf der Karte anzuzeigen.

Nur ein Knoten, der allein ausgewählt wurde, wird hochgestuft. Eine Feldauswahl mit fünfzig Knoten wäre eine Wand aus überlappenden Karten.

render.focusTierTrigger sagt, wann es ausgelöst wird: 'both' (Standard), 'hover', 'selection' oder 'off'. Greifen Sie zu 'off', wenn Sie eine Stilvoreinstellung einbetten, die von einer anderen Person bereitgestellt wird, und möchten, dass die Fokuszeichnung unterdrückt wird, ohne sie zu bearbeiten.

Wenn eine Stufe es bereits anzeigt

Manchmal ist die Fokuszeichnung mit einer der Zoomstufen identisch: eine ruhende Glyphe, die in einem Chip schwebt, wobei der Chip ebenfalls gezeichnet wird, sobald das Diagramm weit genug hineingezoomt ist. Wenn Sie mit der Maus darüber fahren, wird ein zweiter, kleinerer Chip über den bereits auf dem Bildschirm angezeigten Chip gezeichnet. focusTierYieldsAt benennt den Index in tiers, ab dem die Fokuszeichnung aufhört zu feuern:

defaultNodeStyle: {
    tiers: [{ width: 140, height: 44, style: { shape: 'none', html: chipFor } }],
    focusTier: { shape: 'none', html: chipFor },
    focusTierYieldsAt: 0,
}

Während der Knoten auf dieser oder einer reichhaltigeren Ebene gezeichnet wird, lassen Sie ihn unverändert, wenn Sie den Mauszeiger darauf bewegen und eine einzelne Auswahl treffen. Es richtet sich nach der aktiven Ebene und nicht nach der Zoomstufe und verwendet daher dieselben Schwellenwerte wie der Swap. Wenn Sie bei geöffneter Karte hineinzoomen, wird sie ausgeblendet, während die Ebene eingeblendet wird. Wenn Sie wieder herauszoomen, wird sie wieder angezeigt, ohne dass der Zeiger bewegt wird. Lassen Sie es bei einem Knoten, dessen Fokuszeichnung mehr sagt als jede Ebene, deaktiviert, und ein Knoten ohne tiers ignoriert es.

Tooltips werden weiterhin angezeigt

Eine Fokuskarte ersetzt nicht den Tooltip. Die beiden sind unabhängig und ein Tooltip kann etwas enthalten, was die Karte nicht enthält.

Der Tausch selbst

Ein Knoten überblendet von einer Zeichnung zur nächsten, anstatt zu ihr zu schneiden. Die ausgehende Zeichnung wird auf einer eigenen Ebene gehalten und die beiden verschwinden aneinander vorbei, so dass ein Knoten nie mitten im Austausch fehlt, sondern nur dort, wo sie sich überlappen, kurz weicher wird.

render.detailTransition gibt an, wie lange das dauert, in Millisekunden. Der Standardwert ist 160 und deckt jede Zeichnung ab, die der Zoom bestimmt: eine Ebenenkreuzung, die Fokuszeichnung und eine Beschriftung, die minLabelFontSize kreuzt. Stellen Sie es auf 0 ein, um die Zeichnung in einem einzelnen Rahmen zu ersetzen:

const options = {
    render: {
        detailTransition: 0,
        defaultNodeStyle: { tiers: [/* … */] },
    },
}

Jeder Knoten auf dem Bildschirm kreuzt sich im selben Moment, sodass eine Kreuzung so viele Überblendungen auslöst, wie sich Knoten ändern. Gemessen an 210 Knoten, die jeweils eine 140×44-Karte enthalten, läuft der Fade über die gesamte Länge mit 60 fps; Was es kostet, sind etwa 26 ms für den einzelnen Frame, den die Überfahrt bereits benötigt, und diese Zahl wächst nicht mit der Dauer. Deaktivieren Sie es bei einem Diagramm, bei dem dieser Rahmen wichtiger ist als der Übergang.

prefers-reduced-motion schaltet es von selbst aus, unabhängig davon, was die Option sagt.

Etiketten in lesbarer Größe

Eine Beschriftung verläuft über dem Diagramm und skaliert mit ihm. Je weiter außen die Ansicht ist, desto kleiner wird sie dargestellt. Ein Diagramm öffnet sich in jedem Maßstab, den die Anpassung wählt, und dieser Maßstab nimmt ab, wenn das Diagramm wächst: Nach ein paar hundert Knoten besteht der Eröffnungsrahmen aus Text, den niemand lesen kann und der über dem Diagramm gezeichnet wird, das er benennt.

render.minLabelFontSize ist die gerenderte Größe in CSS Pixeln, unterhalb derer keine Beschriftung gezeichnet wird. Der Standardwert ist 9.

const options = {
    render: {
        minLabelFontSize: 9,
    },
}

Der Test ist fontSize × zoom, in gerenderten Pixeln und nicht in der Zoomskala: Eine Skala multipliziert die Koordinaten des erfundenen Layouts, sodass der gleiche Wert eine andere scheinbare Größe im nächsten Datensatz bedeutet.

Es handelt sich um eine Zahl für die gesamte Arbeitsfläche, sowohl für Kantenbeschriftungen als auch für Knotenbeschriftungen. Der Unterschied zwischen ihnen liegt bereits in der Schriftgröße: Eine Kantenbeschriftung wird bei defaultLabelStyle.fontSize (standardmäßig 12) gezeichnet, während ein Knoten vom Knoten abgeleitet wird, max(12, size × 0.45), sodass ein großer Knoten seine Beschriftung auf einem niedrigeren Zoom behält als ein kleiner. Der textFontSize eines Knotenstils ersetzt diese abgeleitete Größe.

0 schaltet das Gate aus und zeichnet bei jedem Zoom jede Beschriftung.

Was zählt als Etikett

Der Text, den die Bibliothek platziert: label einer Kante, text eines Knotens und alles, was render.renderLabel zurückgibt. Die html-, renderNode- oder Stufenkarte eines Knotens ist seine Zeichnung, und tiers ist das, was zwischen den Zeichnungen wählt.

Eine angezeigte Beschriftung bleibt bestehen, bis ihre gerenderte Größe auf 85 % des Schwellenwerts fällt, sodass eine auf der Zeile geparkte Ansicht stabil bleibt, anstatt zu flackern. Jedes in einer Größe gezeichnete Etikett antwortet zusammen, unabhängig davon, zu welchem ​​Element es gehört.

Eine alleine ausgewählte Kante zeigt ihre Beschriftung unabhängig vom Zoom an, gegenskaliert, sodass sie lesbar ist, und nicht die zwei Pixel, bei denen sie ausgeblendet war. Eine Kante hat keinen Tooltip und kein Panel, daher ist ihre Beschriftung die einzige Antwort auf die Frage „Was ist das?“. Ein Knoten benötigt nichts davon: Er antwortet bereits über seinen Tooltip, die Seitenleiste und seine focusTier-Zeichnung.

Eine versteckte Beschriftung ist nicht einfach nur unsichtbar, sie ist auch nicht im Diagramm enthalten – und hier entstehen die Kosten. Bei jedem Simulationstick wird eine Beschriftung neu positioniert, und bei einem großen Diagramm kostet dieser Durchgang allein mehr als ein Frame. Was nach dem Tor übrig bleibt, ist der Schlaganfall, der günstig ist.

Was es nicht tut

Oberhalb des Schwellenwerts können sich die Beschriftungen immer noch überlappen. Eine Kantenbeschriftung ist normalerweise breiter als die Kante, die sie benennt, und dieses Verhältnis ändert sich mit dem Zoom nicht. Bei dieser Option geht es um die Lesbarkeit, nicht um Ordnung.

API

Pivotick stellt einen Renderer-Controller bereit, mit dem Sie direkt mit der Rendering-Engine interagieren können. Alle Methoden sind online verfügbar

Anpassen und Zoomen

Fit and center

graph.renderer.fitAndCenter()

Zomm in / out

graph.renderer.zoomIn()
graph.renderer.zoomOut()