Tematización y estilo

Cada color del lienzo está controlado por una CSS propiedad personalizada (--pvt-*), por lo que la temática es solo CSS. Pivotick envía temas claros y oscuros: alternar entre ellos configurando data-theme en la raíz del gráfico, y usted define el suyo propio de la misma manera manera: un bloque [data-theme] que establece las variables que le interesan. Cuando una variable no cubre algo, el SVG renderizado son elementos simples y clasificados (.pvt-node, .pvt-edge-group path) puedes diseñar directamente.

Cambia el tema a continuación. Light y Dark están integrados; Marca es una costumbre tema definido completamente en CSS: un puñado de variables para la paleta, más algunas ganchos de clase para efectos que las variables no exponen (un brillo de neón en los nodos y bordes, enlaces discontinuos, etiquetas más negritas).

Variables CSS

/* 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 */
}

Ganchos de clase

/* 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));
}

Cambiar tema

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

Opciones

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

Datos

// 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' }
    ]
}