Thème et style

Chaque couleur sur le canevas est pilotée par une propriété personnalisée CSS (--pvt-*), donc la thématique est simplement CSS. Pivotick contient les thèmes light et dark — basculez entre eux en définissant data-theme sur la racine du graphique — et vous définissez le vôtre de la même manière : un bloc [data-theme] qui définit les variables qui vous intéressent. Lorsqu'une variable ne couvre pas quelque chose, le SVG rendu est constitué d'éléments simples et classés (.pvt-node, .pvt-edge-group path) que vous pouvez styliser directement.

Changez de thème ci-dessous. Light et Dark sont intégrés ; Brand est un thème personnalisé entièrement défini dans CSS — une poignée de variables pour la palette, plus quelques crochets de classe pour les effets que les variables n'exposent pas (une lueur au néon sur les nœuds et les bords, des liens en pointillés, des étiquettes plus audacieuses).

CSS variable

/* A custom "brand" theme. Set data-theme="brand" on the graph root (.pivotick)
   and these variables cascade into the canvas — nodes, edges, labels, background
   and grid all recolour, with no re-render. ('light' and 'dark' ship with
   Pivotick and need none of this — they are just other data-theme values.) */
.pivotick[data-theme='brand'] {
    --pvt-bg: #141038;                 /* deep indigo canvas */
    --pvt-graph-grid-color: #241d5c;   /* dotted grid */
    --pvt-node-color: #ff5d8f;         /* vivid pink node fill */
    --pvt-node-stroke: #ffd166;        /* gold ring */
    --pvt-node-stroke-width: 2.5;      /* thicker ring */
    --pvt-node-text-color: #ffffff;    /* label (rendered inside the node) */
    --pvt-edge-stroke: #8b7dff;        /* lavender edges */
}

Crochets de classe

/* Variables cover colours; for effects they don't expose, reach the rendered SVG
   through its classes. Here the brand gets a neon glow on nodes and edges, dashed
   links, and bolder labels — none of which is a variable. */
.pivotick[data-theme='brand'] .pvt-node .node {
    filter: drop-shadow(0 0 5px rgba(255, 93, 143, 0.75));
}
.pivotick[data-theme='brand'] .pvt-node-label {
    font-weight: 800;
    letter-spacing: 0.6px;
}
.pivotick[data-theme='brand'] .pvt-edge-group path {
    stroke-dasharray: 6 5;
    filter: drop-shadow(0 0 2px rgba(139, 125, 255, 0.9));
}

Changer de thème

// Switch a single graph's theme at runtime by setting data-theme on its root
// (the .pivotick element). 'light' and 'dark' ship with Pivotick; 'brand' is a
// custom theme defined in CSS (theme.css). No re-render — the variables cascade
// in immediately.
function applyTheme(container, theme) {
    container.querySelector('.pivotick')?.setAttribute('data-theme', theme)
}

Options

const options = {
    render: {
        defaultNodeStyle: {
            size: 22,
            // Only set the label. Leaving colour/stroke/text-colour unset keeps the
            // built-in defaults, which resolve to CSS variables (--pvt-node-color,
            // --pvt-node-stroke, --pvt-node-text-color) — that is what makes the
            // graph re-theme purely from CSS. Hard-code a colour here and it would
            // win over the variables.
            text: (node) => node.getData()?.label
        }
    }
}

Données

// Short labels sit inside the nodes, so the label colour is themed too.
const data = {
    nodes: [
        { id: 'ada', data: { label: 'Ada' } },
        { id: 'bo', data: { label: 'Bo' } },
        { id: 'cy', data: { label: 'Cy' } },
        { id: 'deb', data: { label: 'Deb' } },
        { id: 'eve', data: { label: 'Eve' } },
        { id: 'fin', data: { label: 'Fin' } },
        { id: 'gil', data: { label: 'Gil' } }
    ],
    edges: [
        { from: 'ada', to: 'bo' },
        { from: 'ada', to: 'cy' },
        { from: 'bo', to: 'deb' },
        { from: 'cy', to: 'deb' },
        { from: 'deb', to: 'eve' },
        { from: 'eve', to: 'fin' },
        { from: 'eve', to: 'gil' },
        { from: 'fin', to: 'gil' }
    ]
}