الخريطة المصغرة

يقوم الوضع full بالفعل بإرساء نظرة عامة على الرسم البياني بأكمله في زاوية قماشية وواحدة السطر — plugins: [minimap()]، كما هو موضح أدناه — يضع السطر الخاص بك الذي تم تكوينه هناك بدلاً من ذلك أي وضع. انقر في أي مكان فيه لإحضار عرض هناك؛ اسحب المستطيل للتحريك. الرسم البياني أدناه أوسع من إطار العرض الخاص به، لذلك هناك مكان للذهاب. السهم الصغير الموجود في الزاوية الداخلية للخريطة المصغرة يطويها بعيدًا فقط هذا الزر عندما تكون اللوحة القماشية أكثر أهمية من النظرة العامة.

ومع ذلك، فهو عبارة عن plugin، وليس كروم مدمج — وضع full يقوم ببساطة بتثبيته من أجل لك، ويقف جانبا للنسخة التي تم تمريرها هنا. يقوم بتثبيت نفسه من خلال PluginContext تم تسليمه ولا يستخدم أي شيء لا يستطيع المكون الإضافي الخاص بك القيام به - يقرأ مدى الرسم البياني باستخدام renderer.getContentBounds()، يحدد المنطقة المرئية بواسطة قلب زوايا القماش من خلال renderer.screenToGraphCoordinates()، وتحريك عرض مع renderer.setViewport(). راجع الإضافات للسطح بأكمله.

كما أنها تظل رخيصة على الرسم البياني الذي يحتاج بالفعل إلى واحد. الصورة تعيش في ذاكرة التخزين المؤقت صورة نقطية خارج الشاشة يتم إعادة تنقيطها فقط عندما يتغير الرسم البياني (أو كل 10 أيام). علامة المحاكاة أثناء استقرار التخطيط)؛ التحريك والتكبير وإعادة الرسم صورة واحدة وواحدة المستطيل، مهما كان عدد العقد. بعد 1500 عقدة، يتوقف عن رسم كل عقدة و كثافة الدهانات بدلا من ذلك، والتي تقرأ أفضل من عشرات الآلاف من النقاط المتداخلة و لا يحل أي أنماط لكل عقدة على الإطلاق.

قم بالتكبير باستخدام عناصر التحكم في إطار العرض، ثم اسحب المستطيل في الصورة المصغرة - لا يتم إعادة رسم صورة المحتوى مطلقًا، بل يتحرك المستطيل فقط.

خيارات

// import { minimap } from 'pivotick'

const options = {
    UI: {
        // `full` mode brings a minimap of its own; `light` and `viewer` need asking
        // (`UI.minimap: true`, or the plugin below). `static` never has one.
        mode: 'full',
        // The other thing full mode brings. Off here: this card is about the minimap.
        table: false
    },
    // A plugin installs itself through the PluginContext it is handed — the core never
    // needs to know it exists. `graph.use(minimap())` works just as well, at any time.
    // Passed here it replaces the one full mode would have mounted, configuration and all.
    plugins: [
        minimap({
            position: 'bottom-right', // the corner the built-in chrome leaves free
            width: 220
            // height: omitted → follows the canvas's aspect ratio
        })
    ],
    render: {
        nodeTypeAccessor: (node) => node.getData()?.kind,
        nodeStyleMap: {
            hub: { color: '#0072B2', size: 13 },
            leaf: { color: '#E69F00', size: 7 }
        }
    },
    simulation: {
        d3LinkDistance: 60
    }
}

البيانات

// A graph deliberately bigger than the viewport, so the minimap has something to
// navigate: six clusters of satellites around a spine.
const nodes = []
const edges = []
const hubs = ['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'zeta']

hubs.forEach((hub, hubIndex) => {
    const angle = (hubIndex / hubs.length) * Math.PI * 2
    nodes.push({
        id: hub,
        data: { name: hub, kind: 'hub' },
        x: Math.cos(angle) * 420,
        y: Math.sin(angle) * 420
    })
    if (hubIndex > 0) edges.push({ from: hubs[hubIndex - 1], to: hub })

    for (let leafIndex = 0; leafIndex < 9; leafIndex++) {
        const id = `${hub}-${leafIndex}`
        const spread = (leafIndex / 9) * Math.PI * 2
        nodes.push({
            id,
            data: { name: id, kind: 'leaf' },
            x: Math.cos(angle) * 420 + Math.cos(spread) * 130,
            y: Math.sin(angle) * 420 + Math.sin(spread) * 130
        })
        edges.push({ from: hub, to: id })
    }
})

const data = { nodes, edges }