ملاحظات لاصقة

الملاحظات عبارة عن تعليقات توضيحية عائمة يتم تقديمها فوق الرسم البياني - قم بإعطاء كل واحدة منها علامة الموضع واللون وبعض النص. اضبط attachedElement وخط موصل يربط الملاحظة إلى العقدة، وتتبعها أثناء تحرك الرسم البياني.

اسحب ملاحظة لتغيير موضعها. تظل الملاحظة الزرقاء مثبتة على Carol — اسحب كارول ومشاهدة متابعة الموصل.

ملاحظات

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

البيانات

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