Erste Schritte

Pivotick ist eine anpassbare Bibliothek zur Graphvisualisierung in TypeScript auf Grundlage der D3-Kraftsimulation. Sie stellt gerichtete und ungerichtete Graphen mit interaktiven Steuerelementen, Kraftsimulation, Baumlayouts und optionalen Oberflächenelementen wie Seitenleisten, Werkzeugleisten, Kontextmenüs und Tooltips dar.

Grundlegende Verwendung

Pivotick kann entweder als modernes JavaScript-Modul oder direkt im Browser über einen Script-Tag verwendet werden.

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. Verwenden Sie eine GitHub-Version (kein Build erforderlich)

Wenn Sie das Projekt nicht selbst erstellen möchten, laden Sie die neueste Version von GitHub herunter.

Schritte:

1. Gehen Sie zur Seite „Releases“ des Repositorys
2. Laden Sie das neueste Dist-Bundle herunter
3. Extrahieren Sie es in Ihr Projekt

Sie sollten Dateien erhalten wie:

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

Dann verwenden Sie sie je nach Ihrer Umgebung:

ES-Modul (empfohlen)

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 }
        ]
    }
})

Browser 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. Aus dem Quellcode erstellen (für die Entwicklung empfohlen)

Verwenden Sie diese Option, wenn Sie die volle Kontrolle über die Bibliothek haben möchten oder diese ändern müssen.

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

Nach dem Erstellen sind die kompilierten Dateien verfügbar in:

dist/

Anschließend können Sie diese je nach Umgebung direkt importieren:

ES-Modul (empfohlen)

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>

Gestaltung

Pivotick wird mit den in pivotick.css enthaltenen Standardstilen geliefert:

Sie können das Aussehen auf zwei Arten anpassen:

• Verwenden Sie die integrierten Klassen von Pivotick.
• Überschreiben Sie Stile mit CSS Variablen.

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

.pvt-node circle {
  fill: cyan;
}