Configuratie-opties

Belangrijkste Pivotick opties

Pivotick ondersteunt een breed scala aan opties om gedrag, lay-out, weergave, simulatie, gebruikersinterface en interacties aan te passen.

Optie	Typ	Standaard	Beschrijving
isDirected	boolean	true	Indien waar, worden randen behandeld zoals aangegeven.
callbacks	InterractionCallbacks	{}	Optionele callbacks voor gebruikersinteracties (klikken, zweven, slepen, enz.).
layout	LayoutOptions	{}	Configuratie voor de grafiekindeling (krachten, boom, afstand, uitlijning).
render	GraphRendererOptions	{}	Pas weergaveopties aan, zoals het uiterlijk van knooppunten/randen
simulation	SimulationOptions	{}	Opties om de natuurkundige simulatie te besturen (krachten, iteraties, enz.).
UI	GraphUI	{}	UI-specifieke opties zoals zijbalk, selectie, tooltips en bedieningselementen.
i18n	I18nOptions	{}	De taal van de eigen tekst van de bibliotheek. Zie De gebruikersinterface vertalen.

Gebruik

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)

Terugbelgesprekken

Met Pivotick kunt u gebruikmaken van gebruikersinteracties en simulatiegebeurtenissen via de optie callbacks. U kunt functies leveren voor verschillende gebeurtenissen die door de gebruiker of de grafiek worden gegenereerd.

Meer info op de Terugbelpagina

Terugbelvoorbeelden:

Terugbellen	Parameters	Beschrijving
onNodeClick	(event: PointerEvent, node: Node, element: svg)	Wordt geactiveerd wanneer op een knooppunt wordt geklikt.
onNodeHoverIn	(event: PointerEvent, node: Node, element: svg)	Wordt geactiveerd wanneer de muis een knooppunt binnengaat.
onSimulationTick	()	Wordt geactiveerd bij elke simulatietik (handig voor aangepaste weergave).

informatie

Het type element is alleen svg als de optie render.type == "svg" is.

Voorbeeld

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)

Indelingsopties

Pivotick ondersteunt meerdere lay-outstrategieën voor het positioneren van knooppunten. U kunt de lay-out configureren via de optie layout.

Optie	Typ	Standaard	Beschrijving
type	'force' | 'tree' | 'structured'	'force'	Het lay-outalgoritme dat moet worden gebruikt. 'force' past een op fysica gebaseerde krachtindeling toe. 'tree' rangschikt knooppunten in een boomstructuur. 'structured' plaatst en zet een kleine grafiek vast, zie Gestructureerde lay-out.

Opties voor boomindeling

Wanneer type: 'tree' is geselecteerd, kunt u de richting van de boom kiezen en optioneel de knooppunten ervan in een radiale lay-out rangschikken.

Optie	Typ	Standaard	Beschrijving
horizontal	boolean	false	Rangschik de knooppunten horizontaal in plaats van verticaal.
radial	boolean	false	Plaats knooppunten in een radiale lay-out in plaats van verticaal.

Voorbeeld

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

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

Renderopties

Met Pivotick kunt u aanpassen hoe knooppunten, randen en labels worden weergegeven, en viewport-interacties configureren, zoals zoomen en meervoudige selectie, met behulp van de optie render.

Optie	Typ	Standaard	Beschrijving
renderNode	(node: Node) => HTMLElement | string | void	undefined	Aangepaste renderer voor knooppunten.
defaultNodeStyle	NodeStyle	defaultNodeStyle	Standaardstijl toegepast op alle knooppunten.
nodeTypeAccessor	(node: Node) => string | undefined	undefined	Functie om toegang te krijgen tot het type knooppunt, gebruikt met nodeStyleMap.
nodeStyleMap	Record<string, NodeStyle>	{}	Wijst knooppunttypen (van nodeTypeAccessor) toe aan stijlen.
minLabelFontSize	number	9	Weergegeven lettergrootte, in CSS pixels, waaronder geen label wordt getekend. 0 tekent ze bij elke zoomlens.
zoomEnabled	boolean	true	Schakel zoom in.
dragEnabled	boolean	true	Schakel het slepen van knooppunten in.

Type weergave

fooi

Pivotick geeft u flexibele controle over de weergave, van eenvoudige standaardinstellingen tot volledig aangepaste weergave. Hier is een kort overzicht:

• defaultNodeStyle, defaultEdgeStyle en defaultLabelStyle definiëren het basisuiterlijk voor alle elementen.
• nodeTypeAccessor + nodeStyleMap maken dynamische styling mogelijk op basis van het type van elk element.
• Met renderNode en renderLabel kunt u volledig aanpassen hoe knooppunten en labels worden getekend (u kunt HTML of tekst retourneren).

De volgende drie weergavevoorbeelden gebruiken de volgende gegevens:

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

Simulatie-opties

De Simulatie-opties bepalen de fysica en het lay-outgedrag van knooppunten en randen voor de grafische simulatie-engine.

Bekijk D3-force officiële documentatie voor meer informatie.

Meestal is het niet nodig om deze opties te wijzigen: standaard Pivotick stemt de lay-out zelf af op basis van het aantal knooppunten, hun grootte en het canvas, en blijft afstemmen terwijl de grafiek verandert. Een willekeurige forceeroptie instellen kiest die grafiek uit en behoudt uw waarde — of stelt simulation.physics in op 'auto' / 'manual' om expliciet te zijn.

UI-opties

Pivotick biedt een flexibele UI-laag bovenop uw grafiek, waardoor u kunt bepalen hoe gebruikers omgaan met knooppunten, randen en het canvas. Met UI-opties kunt u:

• Configureer de algehele mode van de gebruikersinterface (volledig, viewer, statisch, enz.).
• Pas zijbalk en panelen aan om eigenschappen of extra informatie weer te geven.
• Definieer tooltips voor knooppunten en randen, met optionele aangepaste renderers.
• Configureer contextmenu's voor knooppunten, randen en het canvas.
• Schakel alle functies uit waarvoor uw integratie geen nut heeft.

UI-modus

De optie mode regelt het algehele gedrag en interactieniveau van de grafische gebruikersinterface.

• full standaard: Volledige gebruikersinterface met alle panelen, menu's en interacties ingeschakeld.
• light: Minimale gebruikersinterface met essentiële interacties ingeschakeld.
• viewer: Hiermee kunt u alleen door de grafiek navigeren (pannen, zoomen, slepen) zonder dat er UI-panelen worden weergegeven.
• static: Statische grafiek, geen UI-panelen of interacties; de grafiek is alleen-lezen.

Gebruik het volgende voor afbeeldingsstijlgebruik van Pivotick:

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