Aan de slag

Pivotick is een hackbare TypeScript bibliotheek voor grafiekvisualisatie, gebouwd bovenop D3-krachtsimulaties. Het geeft gerichte of ongerichte grafieken weer met interactieve bedieningselementen, krachtsimulatie, ondersteuning voor boomindeling en optionele UI-elementen zoals zijbalken, werkbalken, contextmenu's en tooltips.

Basisgebruik

Pivotick kan worden gebruikt als een moderne JavaScript-module of rechtstreeks in de browser via een scripttag.

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

Installatie

1. Gebruik een GitHub-release (geen build vereist)

Als u het project niet zelf wilt bouwen, download dan de nieuwste release van GitHub.

Stappen:

1. Ga naar de Releases-pagina van de repository
2. Download de nieuwste dist-bundel
3. Pak het uit in uw project

Je zou bestanden moeten krijgen zoals:

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

Gebruik ze dan afhankelijk van uw omgeving:

ES-module (aanbevolen)

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. Bouwen vanuit de broncode (aanbevolen voor ontwikkeling)

Gebruik dit als u volledige controle over de bibliotheek wilt of deze wilt wijzigen.

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

Na het bouwen zijn de gecompileerde bestanden beschikbaar in:

dist/

Afhankelijk van uw omgeving kunt u ze vervolgens rechtstreeks importeren:

ES-module (aanbevolen)

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>

Styling

Pivotick wordt geleverd met standaardstijlen in pivotick.css:

Je kunt het uiterlijk op twee manieren aanpassen:

• Gebruik de ingebouwde klassen van Pivotick.
• Stijlen overschrijven met CSS variabelen.

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

.pvt-node circle {
  fill: cyan;
}