Automatisch abgestimmtes Layout

Ein Diagramm mit fünf Knoten und ein Diagramm mit fünfhundert erfordern eine sehr unterschiedliche Physik, und das Gleiche gilt für ein Diagramm mit kleinen Punkten im Vergleich zu einem Diagramm mit großen Bildkarten. Anstatt einen Satz von Krafteinstellungen auszuwählen und zu hoffen, leitet Pivotick sie von dem ab, was tatsächlich auf dem Bildschirm angezeigt wird – Knotenanzahl, Knotengröße, Arbeitsflächegröße – und leitet sie jedes Mal neu ab, wenn sich das Diagramm ändert. Dies ist die Standardeinstellung.

Vergrößern Sie die Grafik unten und beobachten Sie, wie sich die Knöpfe bewegen: Der Verbindungsabstand verringert sich, wenn die Arbeitsfläche überfüllt wird, und der Zentrierzug erhöht sich, um alles im Rahmen zu halten.

• Es werden nur Knöpfe bewegt, die Sie sehen können. „Auto“ steuert die gleichen Steuerelemente wie das Physik-Flyout, und die Schieberegler folgen dem Gleichen – hinter einem versteckten Hebel passiert nichts.
• Sie gewinnen immer. Ziehen Sie einen Schieberegler oder wählen Sie Tight / Loose, und der Autostopp stoppt endgültig; Es wird niemals eine von Ihnen getroffene Entscheidung überdenken.
• Es bleibt ruhig. Zusammenkommende Trigger werden zusammengeführt und eine Änderung, die zu klein ist, um gesehen zu werden, wird übersprungen – ein Pivot, der vierzig Knoten hinzufügt, kostet also ein Relayout.
• Eine pausierte Simulation wird nie aktiviert.

„Auto“ ist aktiviert, es sei denn, das Diagramm konfiguriert selbst eine Kraft, sodass bestehende Setups ihre beibehalten. Die genaue Regel finden Sie unter Automatische Layout-Optimierung.

—

Optionen

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

Das Diagramm vergrößern

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

Die Knöpfe lesen

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

Daten

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