Stijl op soort

Het meest voorkomende stijlpatroon: stuur het uiterlijk uit uw gegevens. EEN nodeTypeAccessor leest een sleutel van elk knooppunt, en nodeStyleMap wijst die sleutel toe aan een stijl. Voeg een nieuwe rol toe aan uw gegevens en deze wordt automatisch opgemaakt – nee code per knooppunt.

Opties

const options = {
    render: {
        // Pick a style-map key from each node…
        nodeTypeAccessor: (node) => node.getData()?.role,
        // …then style every node of that type identically.
        nodeStyleMap: {
            lead: { shape: 'hexagon', color: '#e11d48', size: 22 },
            engineer: { shape: 'circle', color: '#2563eb', size: 16 },
            designer: { shape: 'square', color: '#16a34a', size: 16 }
        },
        // Labels are shared, so they live on the default style.
        defaultNodeStyle: {
            textColor: '#334155',
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.5
        }
    }
}

Gegevens

const data = {
    nodes: [
        { id: 'maya', data: { name: 'Maya', role: 'lead' } },
        { id: 'raj', data: { name: 'Raj', role: 'engineer' } },
        { id: 'omar', data: { name: 'Omar', role: 'engineer' } },
        { id: 'lena', data: { name: 'Lena', role: 'designer' } },
        { id: 'theo', data: { name: 'Theo', role: 'designer' } }
    ],
    edges: [
        { from: 'maya', to: 'raj' },
        { from: 'maya', to: 'omar' },
        { from: 'maya', to: 'lena' },
        { from: 'lena', to: 'theo' },
        { from: 'raj', to: 'omar' }
    ]
}