D3 gravità fisica

Question

Sto provando a progettare una simulazione di gravità fisica con la libreria D3, ma non ho molta fortuna. Lo 'layout' API reference afferma che la gravità fisica può essere implementata attraverso un parametro di "carica" ​​positivo, ma non sono sicuro di come funzionerebbe.

Quello che sto tentando di implementare in questo momento è un singolo elemento SVG che contiene più punti di riferimento pesati in modo variabile e aumentati a velocità diverse che alla fine escono dalla finestra: i loro pesi definiranno la velocità con cui essi salire. (Fondamentalmente, sto solo cercando di implementare una attrazione gravitazionale globale da oltre la parte superiore del viewport.)

Esiste un modo fattibile per eseguire questa operazione in base al layout della forza D3? Sto solo cercando soluzioni concettuali, ma anche esempi e frammenti di codice sono apprezzati.

Grazie in anticipo!

Answer 1

Ecco le idee di coppia:

1. È possibile modificare direttamente posizione verticale del nodo nel gestore di eventi tick:

   force.on("tick", function(e) { 
       nodes.forEach(function(o, i) { 
        o.y -= o.weight/30; 
       }); 
   
       node.attr("cx", function(d) { return d.x; }) 
        .attr("cy", function(d) { return d.y; }); 
   }); 
   

   è necessario impostare force.gavity (0) per questo approccio.

2. Oppure si può utilizzare force.gravity: tira i nodi verso il centro di layout, è possibile specificare svg transfromation a spostare il centro di layout sopra viewport