Konfigurationsoptionen

Hauptoptionen Pivotick

Pivotick unterstützt eine breite Palette von Optionen zum Anpassen von Verhalten, Layout, Rendering, Simulation, Benutzeroberfläche und Interaktionen.

Option	Typ	Standardwert	Beschreibung
isDirected	boolean	true	Bei „true“ werden Kanten wie gerichtet behandelt.
callbacks	InterractionCallbacks	{}	Optionale Rückrufe für Benutzerinteraktionen (Klicken, Hovern, Ziehen usw.).
layout	LayoutOptions	{}	Konfiguration für das Diagrammlayout (Kräfte, Baum, Abstand, Ausrichtung).
render	GraphRendererOptions	{}	Passen Sie Rendering-Optionen wie die Knoten-/Kantendarstellung an
simulation	SimulationOptions	{}	Optionen zur Steuerung der Physiksimulation (Kräfte, Iterationen usw.).
UI	GraphUI	{}	UI-spezifische Optionen wie Seitenleiste, Auswahl, Tooltips und Steuerelemente.
i18n	I18nOptions	{}	Die Sprache des bibliothekseigenen Textes. Siehe Übersetzen der Benutzeroberfläche.

Nutzung

const container = document.getElementById('graph-container')
const options = { 
    isDirected: true,
    callbacks: {
        onNodeClick: (e, node) => console.log(`nodeClick: ${node.id}`),
    },
    layout: {
        type: 'force',
    },
    render: {
        defaultNodeStyle: {
            shape: 'square',
        },
    },
    simulation: {
        d3ManyBodyStrength: -30
    },
    UI: {
        mode: 'full'
    },
}
const graph = Pivotick(container, options)

Rückrufe

Pivotick ermöglicht Ihnen die Einbindung in Benutzerinteraktionen und Simulationsereignisse über die Option callbacks. Sie können Funktionen für verschiedene vom Benutzer oder dem Diagramm generierte Ereignisse bereitstellen.

Weitere Infos auf der Rückrufseite

Rückrufbeispiele:

Rückruf	Parameter	Beschreibung
onNodeClick	(event: PointerEvent, node: Node, element: svg)	Wird ausgelöst, wenn auf einen Knoten geklickt wird.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	Wird ausgelöst, wenn die Maus einen Knoten betritt.
onSimulationTick	()	Wird bei jedem Simulationstick ausgelöst (nützlich für benutzerdefiniertes Rendering).

Infos

Der Typ element ist nur svg, wenn die Option render.type == "svg" ist.

Beispiel

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

Layoutoptionen

Pivotick unterstützt mehrere Layoutstrategien zum Positionieren von Knoten. Sie können das Layout über die Option layout konfigurieren.

Option	Typ	Standardwert	Beschreibung
type	'force' | 'tree' | 'structured'	'force'	Der zu verwendende Layout-Algorithmus. 'force' wendet ein physikbasiertes Kraftlayout an. 'tree' ordnet Knoten in einer Baumstruktur an. 'structured' platziert und fixiert ein kleines Diagramm, siehe Strukturiertes Layout.

Optionen für das Baumlayout

Wenn type: 'tree' ausgewählt ist, können Sie die Richtung des Baums auswählen und seine Knoten optional in einer radialen Anordnung anordnen.

Option	Typ	Standardwert	Beschreibung
horizontal	boolean	false	Ordnen Sie Knoten horizontal statt vertikal an.
radial	boolean	false	Platzieren Sie Knoten radial statt vertikal.

Beispiel

import Pivotick from './pivotick.es.js'

const options = {
    layout: {
        type: 'tree',
        radial: true,
    // },
    // UI: {
    //     mode: 'static'
    }
}
const graph = new Pivotick(container, data, options)

Renderoptionen

Mit Pivotick können Sie mithilfe der Option render anpassen, wie Knoten, Kanten und Beschriftungen angezeigt werden, und Ansichtsfensterinteraktionen wie Zoomen und Mehrfachauswahl konfigurieren.

Option	Typ	Standardwert	Beschreibung
renderNode	(node: Node) => HTMLElement | string | void	undefined	Benutzerdefinierter Renderer für Knoten.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Standardstil wird auf alle Knoten angewendet.
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.
minLabelFontSize	number	9	Gerenderte Schriftgröße in CSS Pixeln, unterhalb derer keine Beschriftung gezeichnet wird. 0 zeichnet sie bei jedem Zoom.
zoomEnabled	boolean	true	Zoom aktivieren.
dragEnabled	boolean	true	Aktivieren Sie das Ziehen von Knoten.

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:

• defaultNodeStyle, defaultEdgeStyle und defaultLabelStyle definieren das Grundaussehen aller Elemente.
• nodeTypeAccessor + nodeStyleMap ermöglichen dynamisches Styling basierend auf dem Typ jedes Elements.
• Mit renderNode und renderLabel können Sie die Darstellung von Knoten und Beschriftungen vollständig anpassen (Sie können HTML oder Text zurückgeben).

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

const options = {
    render: {
        defaultNodeStyle: {
            shape: 'square',
            size: 4,
            color: '#007acc',
            textColor: '#fff',
            strokeWidth: 0,
        },
        defaultEdgeStyle: {
            markerStart: 'circle',
            markerEnd: 'arrow',
        },
        defaultLabelStyle: {
            fontSize: '6px',
        },
    }
}

Simulationsoptionen

Die Simulationsoptionen steuern die Physik und das Layoutverhalten von Knoten und Kanten für die Graphsimulations-Engine.

ÜberprüfenOffizielle Dokumentation von D3-forceum mehr zu erfahren.

In den meisten Fällen besteht keine Notwendigkeit, diese Optionen zu ändern: Standardmäßig stimmt Pivotick das Layout selbst ab anhand der Anzahl der Knoten, ihrer Größe und der Arbeitsfläche ab und passt sich weiterhin an, wenn sich das Diagramm ändert. Wenn Sie eine beliebige Force-Option festlegen, wird das Diagramm deaktiviert und Ihr Wert beibehalten – oder Sie setzen simulation.physics auf 'auto' / 'manual', um explizit zu sein.

Oberflächenoptionen

Pivotick bietet eine flexible UI-Ebene über Ihrem Diagramm, mit der Sie steuern können, wie Benutzer mit Knoten, Kanten und der Arbeitsfläche interagieren. Mit den Optionen UI können Sie:

• Konfigurieren Sie den gesamten Modus der Benutzeroberfläche (vollständig, Viewer, statisch usw.).
• Passen Sie Seitenleiste und Bedienfelder an, um Eigenschaften oder zusätzliche Informationen anzuzeigen.
• Definieren Sie Tooltips für Knoten und Kanten, mit optionalen benutzerdefinierten Renderern.
• Konfigurieren Sie Kontextmenüs für Knoten, Kanten und die Arbeitsfläche.
• Deaktivieren alle Funktionen, die Ihre Integration nicht benötigt.

UI-Modus

Die Option mode steuert das Gesamtverhalten und die Interaktionsebene der Diagramm-Benutzeroberfläche.

• full Standard: Vollständige Benutzeroberfläche mit allen aktivierten Bedienfeldern, Menüs und Interaktionen.
• light: Minimale Benutzeroberfläche mit aktivierten wesentlichen Interaktionen.
• viewer: Ermöglicht nur das Navigieren im Diagramm (Schwenken, Zoomen, Ziehen), ohne dass UI-Panels angezeigt werden.
• static: Statisches Diagramm, keine UI-Panels oder Interaktionen; Das Diagramm ist schreibgeschützt.

Für die Verwendung von Pivotick im Bildstil verwenden Sie Folgendes:

const options = {
    UI: {  
        mode: 'viewer'
    },
}