Distanza di collegamento dinamico in configurazione forza D3

Question

Ho implementato il layout della forza di d3. Il problema però per me è che il layout non si sta diffondendo sullo schermo. In seguito è l'istantanea:

Voglio i nodi per diffondere attraverso lo schermo con la distanza di collegamento dinamico in quanto v'è molto spazio bianco sul lato destro e sinistro. Ho cercato di randomizzare distanza collegamento come segue:

d3.layout.force() 
    .charge(-800) 
    .linkDistance(function(d){ 
     return (Math.random() * (400 - 200) + 1); 
    }) 
    .size([w, h]); 

Ciò aumenta la distanza di collegamento, ma anche in direzione verticale. Ho provato a impostare l'attributo linkStrength() ma non ha funzionato per me. Come posso diffondere questo layout nella regione solo in direzione orizzontale? C'è un modo per definire la distanza del collegamento per adattarsi alla regione rettangolare della mia pagina?

Answer 1

Una soluzione che vedo è usare this bounding box example per legare il disegno in modo rettangolare/orizzontale e quindi impostare la carica su un livello molto alto (mira a -10000, qualcosa del genere) in modo che i nodi siano sparsi al massimo prima di essere fermato dai limiti che hai impostato. È quindi possibile scegliere di impostare alternativamente il testo a destra o a sinistra del nodo in base alla sua posizione, in modo che non venga tagliato. Oppure puoi anche rilegare il testo.