إنشاء حواف (السحب والنقر)

تم إنشاء ميزة إنشاء الحواف بشكل مضمن، مع نمطين للتفاعل مدعومين بـ "ظل" مباشر "معاينة الحافة": نقرة مع النقر (انقر فوق العقدة المصدر، ثم الهدف) و السحب والإفلات (اسحب من عقدة إلى أخرى).

انقر على تعديل الرسم البياني (أعلى اليمين)، ثم إضافة حافة، وقم بتوصيل العقدتين — أو فقط اسحب من عقدة إلى أخرى. كل حافة جديدة تطلق حدث البيانات edgeAdd، والذي هنا يفرقع نخب.

خيارات

// Edge creation lives in the full UI mode. Turn it on and the toolbar's
// Edit Graph → Add Edge starts a click-click (or drag) connect session — the
// shadow-edge preview and both interaction styles come for free.
const options = {
    // Off: `full` mode brings a minimap and the data dock, and this card is about
    // neither (see the Minimap and Data table cards for those).
    UI: { mode: 'full', minimap: false, table: false }
}

البيانات

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