Empezando

Pivotick es una biblioteca de visualización de gráficos TypeScript pirateable construida sobre simulaciones de fuerza D3. Representa gráficos dirigidos o no dirigidos con controles interactivos, simulación de fuerza, compatibilidad con diseño de árbol y elementos de interfaz de usuario opcionales, como barras laterales, barras de herramientas, menús contextuales e información sobre herramientas.

Uso básico

Pivotick se puede utilizar como un módulo JavaScript moderno o directamente en el navegador mediante una etiqueta de secuencia de comandos.

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

Instalación

1. Utilice una versión GitHub (no se requiere compilación)

Si no desea crear el proyecto usted mismo, descargue la última versión desde GitHub.

Pasos:

1. Vaya a la página de lanzamientos del repositorio.
2. Descargue el último paquete dist
3. Extráelo en tu proyecto

Deberías obtener archivos como:

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

Luego úsalos dependiendo de tu entorno:

Módulo ES (recomendado)

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

Navegador 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. Construir desde el código fuente (recomendado para desarrollo)

Úselo si desea tener control total sobre la biblioteca o necesita modificarla.

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

Después de la compilación, los archivos compilados estarán disponibles en:

dist/

Luego puede importarlos directamente según su entorno:

Módulo ES (recomendado)

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>

Estilo

Pivotick viene con estilos predeterminados incluidos en pivotick.css:

Puedes personalizar el aspecto de dos maneras:

• Utilice las clases integradas de Pivotick.
• Anule los estilos usando CSS variables.

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

.pvt-node circle {
  fill: cyan;
}