Forceer lay-out + afstemming

De standaardlay-out is een natuurkundige simulatie: knooppunten stoten elkaar af, verbindingen werken als veren, en een zachte zwaartekracht houdt alles gecentreerd. Vorm van drie knoppen het resultaat: stem ze zo af dat ze van een strakke knoop naar een luchtige, leesbare kaart gaan.

• d3ManyBodyStrength (standaard -150) — hoe harde knooppunten uit elkaar duwen. Meer negatief spreidt de grafiek uit.
• d3LinkDistance (standaard 30) — de rustlengte van elke link.
• d3GravityStrengthConnected (standaard 0.001) — de centreertrekkracht gekoppelde knooppunten. Hoger verzamelt de grafiek; de bijna-nul standaard laat links en toe afstoting regelt het in plaats daarvan. (Eenzame, randloze knooppunten gebruiken d3GravityStrength, standaard 0.1, zodat ze niet zelfstandig kunnen wegdrijven.)

Versleep een knooppunt en de simulatie wordt er opnieuw omheen gevestigd.

Opties

const options = {
    layout: { type: 'force' },
    simulation: {
        // Repulsion between every pair of nodes (negative = push apart).
        // Default -150. A stronger push spreads the graph out and untangles
        // dense clusters — raise it when nodes overlap.
        d3ManyBodyStrength: -360,
        // Resting length of each link. Default 30. Longer links give connected
        // nodes more breathing room.
        d3LinkDistance: 70,
        // Centering pull for connected nodes (the ones with edges). Defaults to a
        // tiny 0.001 so links + repulsion find their own balance; raise it to gather
        // the graph toward the middle instead of letting it sprawl. Lower = looser
        // and airier; higher = a tighter ball.
        d3GravityStrengthConnected: 0.05,
        // The pull for isolated, edge-less nodes (default 0.1) is a separate knob —
        // d3GravityStrength — so a lone node still can't drift off on its own.
        d3GravityStrength: 0.1
    }
}

Gegevens

const data = {
    nodes: [
        { id: 'core' },
        { id: 'api' },
        { id: 'web' },
        { id: 'mobile' },
        { id: 'auth' },
        { id: 'billing' },
        { id: 'search' },
        { id: 'index' },
        { id: 'queue' },
        { id: 'worker' },
        { id: 'db' },
        { id: 'cache' },
        { id: 'cdn' },
        { id: 'logs' }
    ],
    edges: [
        { from: 'web', to: 'api' },
        { from: 'mobile', to: 'api' },
        { from: 'api', to: 'core' },
        { from: 'api', to: 'auth' },
        { from: 'api', to: 'billing' },
        { from: 'api', to: 'search' },
        { from: 'search', to: 'index' },
        { from: 'core', to: 'queue' },
        { from: 'queue', to: 'worker' },
        { from: 'worker', to: 'db' },
        { from: 'core', to: 'db' },
        { from: 'api', to: 'cache' },
        { from: 'web', to: 'cdn' },
        { from: 'worker', to: 'logs' },
        { from: 'auth', to: 'db' },
        { from: 'billing', to: 'db' }
    ]
}