Kleverige notities

Notities zijn vrij zwevende annotaties die boven de grafiek worden weergegeven. Geef elke annotatie een positie, een kleur en wat tekst. Stel attachedElement en een connectorlijn in de notitie naar een knooppunt en volg deze terwijl de grafiek beweegt.

Versleep een notitie om deze te verplaatsen. De blauwe notitie blijft vastgezet op Carol — sleep Carol en kijk hoe de connector volgt.

Opmerkingen

// Free-floating annotations placed in graph coordinates. `attachedElement` ties a
// note to a node so a connector line tracks it as the graph moves.
const notes = [
    {
        id: 'welcome',
        content: 'Drag me around — I float above the graph.',
        color: '#FDE68A',
        x: -70,
        y: -220,
        width: 240,
        height: 120
    },
    {
        id: 'callout',
        content: 'Pinned to Carol — drag her and I follow.',
        color: '#93C5FD',
        x: 80,
        y: 40,
        width: 210,
        height: 150,
        attachedElement: { type: 'node', id: 'carol' }
    }
]

Gegevens

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice' } },
        { id: 'bob', data: { label: 'Bob' } },
        { id: 'carol', data: { label: 'Carol' } },
        { id: 'dave', data: { label: 'Dave' } },
        { id: 'erin', data: { label: 'Erin' } }
    ],
    edges: [
        { from: 'alice', to: 'bob' },
        { from: 'alice', to: 'carol' },
        { from: 'carol', to: 'dave' },
        { from: 'erin', to: 'alice' }
    ],
    notes // free-floating annotations (see the Notes tab)
}