تبديل التخطيط المباشر

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

changeLayout يُرجع وعدًا يتم حله فقط بمجرد ظهور التخطيط الجديد تمت تسويته وإعادة توسيطه، لذا فإن انتقالات التسلسل هي await فقط. الموقت هو بدأ في onLoadedCallback وتم مسحه في onUnmountedCallback حتى يتمكن من ذلك لا تطلق النار أبدًا بعد اختفاء الرسم البياني.

التخطيط الحالي: شجرة عمودية

دورة التخطيط

// The layouts to rotate through. The initial render is already STATES[0].
const STATES = [
    { label: 'Vertical tree', type: 'tree', options: { layout: { rootId: 'ceo', horizontal: false, radial: false } } },
    { label: 'Horizontal tree', type: 'tree', options: { layout: { rootId: 'ceo', horizontal: true, radial: false } } },
    { label: 'Radial tree', type: 'tree', options: { layout: { rootId: 'ceo', radial: true } } },
    { label: 'Force', type: 'force', options: {} }
]

let timer = null
let stopped = false

// Switch layouts on a timer. `changeLayout` resolves only once the new layout
// has settled and re-centered, so we await it, then pause before the next.
function startCycling(graph, onState) {
    stopped = false
    let i = 0
    const step = async () => {
        if (stopped) return
        i = (i + 1) % STATES.length
        const state = STATES[i]
        onState?.(state.label)
        await graph.simulation.changeLayout(state.type, state.options)
        if (stopped) return
        timer = setTimeout(step, 1800)
    }
    timer = setTimeout(step, 2400)
}

// Cleared from the demo's onUnmountedCallback so the timer can't outlive the graph.
function stopCycling() {
    stopped = true
    if (timer) clearTimeout(timer)
    timer = null
}

خيارات

// Start on a vertical tree; the cycle below switches it at runtime.
const options = {
    layout: { type: 'tree', rootId: 'ceo' }
}

البيانات

const data = {
    nodes: [
        { id: 'ceo' },
        { id: 'cto' },
        { id: 'cfo' },
        { id: 'coo' },
        { id: 'eng' },
        { id: 'platform' },
        { id: 'infra' },
        { id: 'data' },
        { id: 'finance' },
        { id: 'billing' },
        { id: 'ops' },
        { id: 'support' },
        { id: 'qa' }
    ],
    edges: [
        { from: 'ceo', to: 'cto' },
        { from: 'ceo', to: 'cfo' },
        { from: 'ceo', to: 'coo' },
        { from: 'cto', to: 'eng' },
        { from: 'cto', to: 'platform' },
        { from: 'platform', to: 'infra' },
        { from: 'platform', to: 'data' },
        { from: 'eng', to: 'qa' },
        { from: 'cfo', to: 'finance' },
        { from: 'cfo', to: 'billing' },
        { from: 'coo', to: 'ops' },
        { from: 'coo', to: 'support' }
    ]
}