Options de configuration

Principales options Pivotick

Pivotick prend en charge un large éventail d'options pour personnaliser le comportement, la mise en page, le rendu, la simulation, l'interface utilisateur et les interactions.

Options	Type	Valeur par défaut	Description
`isDirected`	`boolean`	`true`	Si c'est vrai, les bords sont traités comme indiqué.
`callbacks`	`InterractionCallbacks`	`{}`	Rappels facultatifs pour les interactions utilisateur (clic, survol, glisser, etc.).
`layout`	`LayoutOptions`	`{}`	Configuration de la disposition du graphique (forces, arbre, espacement, alignement).
`render`	`GraphRendererOptions`	`{}`	Personnalisez les options de rendu telles que l'apparence des nœuds/bords
`simulation`	`SimulationOptions`	`{}`	Options pour contrôler la simulation physique (forces, itérations, etc.).
`UI`	`GraphUI`	`{}`	Options spécifiques à l'interface utilisateur telles que la barre latérale, la sélection, les info-bulles et les contrôles.
`i18n`	`I18nOptions`	`{}`	La langue du propre texte de la bibliothèque. Voir Traduction de l'interface utilisateur.

Utilisation

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)

Rappels

Pivotick vous permet de vous connecter aux interactions des utilisateurs et aux événements de simulation via l'option callbacks. Vous pouvez fournir des fonctions pour divers événements générés par l'utilisateur ou le graphique.

Plus d'infos sur la page Rappels

Exemples de rappel :

Rappel	Paramètres	Description
`onNodeClick`	`(event: PointerEvent, node: Node, element: svg)`	Lancé lorsqu'un nœud est cliqué.
`onNodeHoverIn`	`(event: PointerEvent, node: Node, element: svg)`	Lancé lorsque la souris entre dans un nœud.
`onSimulationTick`	`()`	Déclenché à chaque tick de simulation (utile pour le rendu personnalisé).

infos

Le type element est svg uniquement si l'option render.type == "svg".

Exemple

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)

Options de mise en page

Pivotick prend en charge plusieurs stratégies de disposition pour positionner les nœuds. Vous pouvez configurer la mise en page via l'option layout.

Options	Type	Valeur par défaut	Description
`type`	`'force' \| 'tree' \| 'structured'`	`'force'`	L'algorithme de mise en page à utiliser. `'force'` applique une disposition des forces basée sur la physique. `'tree'` organise les nœuds dans une structure arborescente. `'structured'` place et épingle un petit graphique, voir Mise en page structurée.

Options de disposition de l'arborescence

Lorsque type: 'tree' est sélectionné, vous pouvez choisir la direction de l'arborescence et éventuellement organiser ses nœuds selon une disposition radiale.

Options	Type	Valeur par défaut	Description
`horizontal`	`boolean`	`false`	Disposez les nœuds horizontalement plutôt que verticalement.
`radial`	`boolean`	`false`	Placez les nœuds dans une disposition radiale plutôt que verticale.

Exemple

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

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

Options de rendu

Pivotick vous permet de personnaliser la façon dont les nœuds, les bords et les étiquettes sont affichés et de configurer les interactions dans la fenêtre d'affichage telles que le zoom et la sélection multiple, à l'aide de l'option render.

Options	Type	Valeur par défaut	Description
`renderNode`	`(node: Node) => HTMLElement \| string \| void`	`undefined`	Moteur de rendu personnalisé pour les nœuds.
`defaultNodeStyle`	NodeStyle	defaultNodeStyle	Style par défaut appliqué à tous les nœuds.
`nodeTypeAccessor`	`(node: Node) => string \| undefined`	`undefined`	Fonction pour accéder au type d'un nœud, utilisé avec `nodeStyleMap`.
`nodeStyleMap`	`Record<string, NodeStyle>`	`{}`	Mappe les types de nœuds (de `nodeTypeAccessor`) aux styles.
`minLabelFontSize`	`number`	`9`	Taille de la police rendue, en CSS pixels, en dessous de laquelle aucune étiquette n'est dessinée. `0` les dessine à chaque zoom.
`zoomEnabled`	`boolean`	`true`	Activez le zoom.
`dragEnabled`	`boolean`	`true`	Activez le déplacement des nœuds.

Type de rendu

conseil

Pivotick vous offre un contrôle flexible sur le rendu, des simples valeurs par défaut au rendu entièrement personnalisé. Voici un bref aperçu :

defaultNodeStyle, defaultEdgeStyle et defaultLabelStyle définissent l'apparence de base de tous les éléments.
nodeTypeAccessor + nodeStyleMap permettent un style dynamique basé sur le type de chaque élément.
renderNode et renderLabel vous permettent de personnaliser entièrement la façon dont les nœuds et les étiquettes sont dessinés (vous pouvez renvoyer HTML ou du texte).

Les trois exemples de rendu suivants utilisent les données suivantes :

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

Options de simulation

Les options Simulation contrôlent la physique et le comportement de disposition des nœuds et des arêtes pour le moteur de simulation graphique.

Consultez la Documentation officielle de D3-force pour en savoir plus.

La plupart du temps, il n'est pas nécessaire de modifier ces options : par défaut Pivotick ajuste la mise en page elle-même à partir du nombre de nœuds, de leur taille et du canevas, et continue de s'ajuster à mesure que le graphique change. La définition d'une option de force désactive ce graphique et conserve votre valeur - ou définissez simulation.physics sur 'auto' / 'manual' pour être explicite.

Options de l’interface

Pivotick fournit une couche d'interface utilisateur flexible au-dessus de votre graphique, vous permettant de contrôler la façon dont les utilisateurs interagissent avec les nœuds, les bords et le canevas. En utilisant les options UI, vous pouvez :

Configurez le mode global de l'interface utilisateur (complète, visionneuse, statique, etc.).
Personnalisez sidebar et les panneaux pour afficher les propriétés ou des informations supplémentaires.
Définissez tooltips pour les nœuds et les bords, avec des moteurs de rendu personnalisés facultatifs.
Configurez les menus contextuels **** pour les nœuds, les bords et le canevas.
Désactivez toute fonctionnalité pour laquelle votre intégration n'a aucune utilité.

Mode interface utilisateur

L'option mode contrôle le comportement global et le niveau d'interaction de l'interface utilisateur du graphique.

full par défaut : interface utilisateur complète avec tous les panneaux, menus et interactions activés.
light : interface utilisateur minimale avec les interactions essentielles activées.
viewer : permet uniquement de naviguer dans le graphique (panoramique, zoom, glisser) sans afficher aucun panneau d'interface utilisateur.
static : graphique statique, pas de panneaux d'interface utilisateur ni d'interactions ; le graphique est en lecture seule.

Pour une utilisation de style image de Pivotick, utilisez ce qui suit :

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

Options de configuration ​

Principales options Pivotick ​

Utilisation ​

Rappels ​

Exemple ​

Options de mise en page ​

Options de disposition de l'arborescence ​

Exemple ​

Options de rendu ​

Type de rendu ​

Options de simulation ​

Options de l’interface ​

Mode interface utilisateur ​

Options de configuration

Principales options Pivotick

Utilisation

Rappels

Exemple

Options de mise en page

Options de disposition de l'arborescence

Exemple

Options de rendu

Type de rendu

Options de simulation

Options de l’interface

Mode interface utilisateur