Bien démarrer

Pivotick est une bibliothèque de visualisation de graphes en TypeScript, facile à personnaliser et construite sur les simulations de forces de D3. Elle affiche des graphes orientés ou non orientés avec des commandes interactives, une simulation de forces, des dispositions arborescentes et des composants d’interface facultatifs : barres latérales, barres d’outils, menus contextuels et infobulles.

Utilisation de base

Pivotick peut être utilisé soit comme un module JavaScript moderne, soit directement dans le navigateur via une balise de script.

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

Installation

1. Utilisez une version GitHub (aucune build requise)

Si vous ne souhaitez pas créer le projet vous-même, téléchargez la dernière version depuis GitHub.

Étapes :

1. Accédez à la page Releases du référentiel
2. Téléchargez le dernier bundle de distribution
3. Extrayez-le dans votre projet

Vous devriez obtenir des fichiers comme :

pivotick.es.js
pivotick.umd.js
pivotick.iife.js
pivotick.css

Utilisez-les ensuite en fonction de votre environnement :

Module ES (recommandé)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

Navigateur IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

2. Construire à partir des sources (recommandé pour le développement)

Utilisez-le si vous souhaitez un contrôle total sur la bibliothèque ou si vous devez la modifier.

git clone https://github.com/pivotick/pivotick.git
cd pivotick
npm install
npm run build

Après la construction, les fichiers compilés seront disponibles dans :

dist/

Vous pouvez ensuite les importer directement en fonction de votre environnement :

Module ES (recommandé)

import { Pivotick } from 'pivotick'
import 'pivotick/dist/pivotick.css'

const app = new Pivotick({
    container: document.getElementById('app'),
    data: {
        nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
        ],
        edges: [
            { from: 1, to: 2 }
        ]
    }
})

IIFE / UMD

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/assets/pivotick.css" />
    <script src="/assets/pivotick.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const app = new Pivotick({
        container: document.getElementById('app'),
        data: {
          nodes: [
            { id: 1, data: { label: 'A' } },
            { id: 2, data: { label: 'B' } }
          ],
          edges: [
            { from: 1, to: 2 }
          ]
        }
      })
    </script>
  </body>
</html>

Styles

Pivotick est livré avec les styles par défaut inclus dans pivotick.css :

Vous pouvez personnaliser l'apparence de deux manières :

• Utilisez les classes intégrées de Pivotick.
• Remplacez les styles en utilisant les variables CSS.

:root {
  --pvt-node-color: #FDDA24;
  --pvt-node-stroke: #000000;
  --pvt-edge-stroke: #EF3340;
}

.pvt-node circle {
  fill: cyan;
}