forza d3.js la layout diretta vincolata da una forma

Question

mi chiedevo se esiste un modo per creare una forza diretta disposizione con d3.js e limitare entro una forma arbitraria in modo tale che

• tutti i nodi sono distribuiti equivalentemente all'interno forma e
• la distanza tra il bordo e nodi è ugualmente alla distanza tra i nodi

spero che ci sia già una soluzione là fuori. Altrimenti la mia idea è di iniziare con il layout della forza diretta e controllare le distanze dai nodi ai confini in ogni iterazione. Qualche suggerimento da parte tua?

Answer 1

Anche la tua idea è mia. Nella funzione tick è possibile aggiungere ulteriori forze. Questo è il mio suggerimento (non testato):

force.on('tick', function(e) { 

    node 
    .each(calcBorderDistance) 
    .attr('transform', function(d) { 
     d.x -= e.alpha*(1/Math.pow(d.borderDistance.x,2); 
     d.y -= e.alpha*(1/Math.pow(d.borderDistance.y,2); 
     return 'translate(' + d.x + ',' + d.y + ')'; // Move node 
    }); 
}); 

function calcBorderdistance(d) { 
    // Insert code here to calculate the distance to the nearest border of your shape 
    var x = ..., y = ...; 
    d.borderDistance = {'x':x,'y':y}; 
} 

ho la distanza quadratica inversa alla funzione di confine più vicino vagamente basato sulle formule in carta eccellente Drawing Graphs Nicely using Simulated Annealing. L'immagine seguente mostra come i metodi di questo documento riguardano disegno nodi delimitate da una scatola:

E questa immagine caso illustrare con diversi vincoli, coinvolgendo collegamenti tra i nodi: