Style de nœud par défaut

render.defaultNodeStyle définit l'apparence de base de chaque nœud : forme, taille, couleur, trait et étiquette. Remplacez n'importe quel champ par nœud via son style. Ici, les quatre formes intégrées (circle, square, triangle, hexagon) partagent un style par défaut, cette carte sert donc également de référence de forme.

Options

const options = {
    render: {
        // Applied to every node unless its own `style` overrides a field.
        defaultNodeStyle: {
            shape: 'circle',
            size: 18,
            color: '#4f46e5',
            strokeColor: '#ffffff',
            strokeWidth: 2,
            textColor: '#334155',
            // Render each label below its shape (negative shift = below the node).
            text: (node) => node.getData()?.label,
            textVerticalShift: -1.4
        }
    }
}

Données

// One node per built-in shape — each overrides only `shape`, so the rest of the
// appearance comes from the shared defaultNodeStyle below.
const data = {
    nodes: [
        { id: 'circle', data: { label: 'circle' }, style: { shape: 'circle' } },
        { id: 'square', data: { label: 'square' }, style: { shape: 'square' } },
        { id: 'triangle', data: { label: 'triangle' }, style: { shape: 'triangle' } },
        { id: 'hexagon', data: { label: 'hexagon' }, style: { shape: 'hexagon' } }
    ],
    edges: [
        { from: 'circle', to: 'square' },
        { from: 'square', to: 'triangle' },
        { from: 'triangle', to: 'hexagon' }
    ]
}