Haftnotizen

Notizen sind frei schwebende Anmerkungen, die über dem Diagramm gerendert werden. Geben Sie jeder Anmerkung eine Position, eine Farbe und etwas Text. Setzen Sie attachedElement und eine Verbindungslinie verbindet die Notiz mit einem Knoten und verfolgt sie, während sich das Diagramm bewegt.

Ziehen Sie eine Notiz, um sie neu zu positionieren. Die blaue Notiz bleibt an Carol angeheftet – ziehen Sie Carol und beobachten Sie, wie der Anschluss folgt.

Notizen

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

Daten

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