Minimapa

El modo full ya incluye una descripción general de todo el gráfico en una esquina del lienzo, y uno línea - plugins: [minimap()], como se muestra a continuación - coloca su propia configuración allí, en cualquier modo. Haga clic en cualquier lugar para traer el ver allí; arrastre el rectángulo para realizar una panorámica. El siguiente gráfico es más ancho que su ventana gráfica, por lo que hay algún lugar adonde ir. La pequeña flecha en la esquina interior del minimapa lo despliega para solo ese botón cuando el lienzo importa más que la descripción general.

Aun así, es un plugin, no Chrome integrado; el modo full simplemente lo instala para usted, y se hace a un lado para recibir la copia que se pasa aquí. Se instala a través del PluginContext se entrega y no utiliza nada que un complemento propio no pueda utilizar: se lee la extensión del gráfico con renderer.getContentBounds(), calcula la región visible por invirtiendo las esquinas del lienzo a través de renderer.screenToGraphCoordinates(), y mueve el ver con renderer.setViewport(). Consulte Complementos para ver toda la superficie.

También sigue siendo barato en un gráfico que realmente lo necesita. La imagen vive en un caché. mapa de bits fuera de pantalla que solo se vuelve a rasterizar cuando cambia el gráfico (o cada 10 tic de simulación mientras se asienta un diseño); panorámica y zoom redibujar una imagen y una rectángulo, cualquiera que sea el número de nodos. Pasados los 1500 nodos, deja de dibujar cada nodo y En su lugar, pinta la densidad, que se lee mejor que decenas de miles de puntos superpuestos y no resuelve ningún estilo por nodo.

Haga zoom con los controles de la ventana gráfica y luego arrastre el rectángulo en el minimapa: el La imagen del contenido nunca se vuelve a dibujar, solo se mueve el rectángulo.

Opciones

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

Datos

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