自動調整されたレイアウト

5 つのノードのグラフと 500 のノードのグラフでは、まったく異なる物理が必要になります。小さなドットのグラフと大きな画像カードのグラフも同様です。選ぶのではなく 1 セットの力の設定と希望、Pivotick は実際のものからそれらを導き出します画面上 - ノード数、ノードサイズ、キャンバスサイズ - が表示されるたびにそれらを再導出します。グラフが変化します。これがデフォルトです。

以下のグラフを拡大してノブの動きを観察してください: キャンバスが広がるにつれてリンク距離が減少します混雑すると、センタリングプルが上昇してすべてをフレーム内に保持します。

目に見えるノブのみを動かします。物理演算と同じコントロールを自動で動かします。フライアウトすると、スライダーもそれに追従します。隠されたレバーの後ろでは何も起こりません。
あなたは常に勝ちます。 スライダーをドラッグするか、タイト / ルーズ を選択すると自動停止します永久に;あなたが行った選択を再調整することはありません。
平静を保ちます。 集まったきっかけが合体し、変化も目に見えない小さな部分はスキップされます。そのため、40 個のノードを追加するピボットには 1 回の再レイアウトがかかります。
一時停止したシミュレーションが復帰することはありません。

グラフ自体が力を構成しない限り、自動はオンになるため、既存の設定は維持されます。彼らのもの。正確なルールについては、自動レイアウト調整を参照してください。

—

オプショングラフを拡大するノブの読み方データ

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

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

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

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

自動調整されたレイアウト ​

自動調整されたレイアウト