Diseño ajustado automáticamente

Una gráfica de cinco nodos y una gráfica de quinientos quieren una física muy diferente, y lo mismo ocurre con un gráfico de puntos pequeños versus uno de tarjetas con imágenes grandes. En lugar de escoger un conjunto de configuraciones de fuerza y, con la esperanza, Pivotick las deriva de lo que realmente es en la pantalla (recuento de nodos, tamaño de nodo, tamaño del lienzo) y los vuelve a derivar cada vez que cambios en el gráfico. Este es el valor predeterminado.

Haga crecer el gráfico a continuación y observe cómo se mueven las perillas: la distancia del enlace disminuye a medida que el lienzo se llena y el centro se eleva para mantener todo en el marco.

• Solo mueve las perillas que puedes ver. Auto maneja los mismos controles que Física menú desplegable, y los controles deslizantes lo siguen: no sucede nada detrás de una palanca oculta.
• Siempre ganas. Arrastra un control deslizante o elige Apretado / Suelto y se detiene automáticamente para siempre; nunca volverá a sintonizar una elección que hayas hecho.
• Se mantiene en calma. Los factores desencadenantes que se juntan se fusionan y también hay un cambio. Se omite lo pequeño para ver, por lo que un pivote que agrega cuarenta nodos cuesta una retransmisión.
• Nunca activa una simulación pausada.

Auto está activado a menos que el gráfico configure una fuerza en sí, por lo que las configuraciones existentes se mantienen el de ellos. Consulte Ajuste automático del diseño para conocer la regla exacta.

—

Opciones

// Nothing here configures a force, so the layout tunes itself — that is the
// default. `physics: 'auto'` is spelled out only because the documentation
// gallery pins every other example to `'manual'` for stable screenshots.
//
// Setting any force option instead (d3LinkDistance, d3ManyBodyStrength,
// d3CollideRadiusMultiplier, d3VelocityDecay, d3GravityStrength,
// d3GravityStrengthConnected, d3AlphaDecay, cooldownTime) would keep your value
// and switch the tuning off for that graph.
const options = {
    simulation: { physics: 'auto' }
}

Hacer crecer el gráfico

// Auto re-tunes on every visible change to the graph, so growing it is all it
// takes to watch the knobs move. Triggers arriving together are coalesced into a
// single pass, and a change too small to matter is skipped entirely — so a pivot
// that adds forty nodes costs one relayout, not forty.
let seq = 0

function addBatch(graph, size = 20) {
    const existing = graph.getNodes()
    const nodes = []
    const edges = []
    for (let i = 0; i < size; i++) {
        const id = `n-${++seq}`
        const pool = existing.concat(nodes)
        const parent = pool[Math.floor(Math.random() * pool.length)]
        nodes.push({ id, data: { label: id } })
        edges.push({ from: parent.id, to: id })
    }
    graph.updateData(nodes, edges)
}

function reset(graph) {
    for (const node of graph.getNodes()) {
        if (!data.nodes.some((seed) => seed.id === node.id)) graph.removeNode(node.id)
    }
    seq = 0
}

leyendo las perillas

// Auto only ever moves the knobs the Physics flyout exposes, so whatever it
// decided can simply be read back — and overridden by dragging a slider, which
// hands control back to you for good.
function readKnobs(graph) {
    const { repulsion, linkDistance, centering } = graph.simulation.getPhysicsKnobs()
    return {
        nodes: graph.getNodes().length,
        repulsion,
        linkDistance,
        centering,
        auto: graph.simulation.isAutoPhysicsEnabled()
    }
}

Datos

// A small seed graph — small enough that fixed force settings would leave it
// huddled in the middle of the canvas.
const data = {
    nodes: [
        { id: 'core', data: { label: 'core' } },
        { id: 'api', data: { label: 'api' } },
        { id: 'web', data: { label: 'web' } },
        { id: 'db', data: { label: 'db' } },
        { id: 'queue', data: { label: 'queue' } }
    ],
    edges: [
        { from: 'web', to: 'api' },
        { from: 'api', to: 'core' },
        { from: 'core', to: 'db' },
        { from: 'core', to: 'queue' }
    ]
}