Minikaart

De modus full koppelt al een overzicht van de hele grafiek in een canvashoek, en één line — plugins: [minimap()], zoals hieronder — plaatst in plaats daarvan uw eigen geconfigureerde regel elke modus. Klik ergens erin om het bekijken daar; sleep de rechthoek om te pannen. De onderstaande grafiek is dus breder dan de viewport er is ergens een plek om naartoe te gaan. De kleine pijl in de binnenhoek van de minimap vouwt deze weg precies die knop als het canvas belangrijker is dan het overzicht.

Toch is het een plug-in, geen ingebouwd chroom — in de full-modus wordt het eenvoudigweg geïnstalleerd u, en gaat opzij voor de kopie die hier is doorgegeven. Het installeert zichzelf via de PluginContext het wordt overhandigd en gebruikt niets dat een eigen plug-in niet zou kunnen — het leest de omvang van de grafiek met renderer.getContentBounds(), berekent het zichtbare gebied met het omkeren van de canvashoeken via renderer.screenToGraphCoordinates(), en verplaatst de bekijken met renderer.setViewport(). Zie Plug-ins voor het hele oppervlak.

Het blijft ook goedkoop op een grafiek die er eigenlijk een nodig heeft. De foto bevindt zich in een cache offscreen bitmap die alleen opnieuw wordt gerasterd als de grafiek verandert (of elke 10e simulatie tik terwijl een lay-out zich vestigt); pannen en zoomen opnieuw tekenen één afbeelding en één rechthoek, ongeacht het aantal knooppunten. Na 1500 knooppunten stopt het met het tekenen van elk knooppunt en schildert in plaats daarvan dichtheid, die beter leest dan tienduizenden overlappende punten en lost helemaal geen stijlen per knooppunt op.

Zoom in met de viewport-besturingselementen en sleep vervolgens de rechthoek in de minikaart: de inhoudsafbeelding wordt nooit opnieuw getekend, alleen de rechthoek beweegt.

Opties

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

Gegevens

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