Constrained d3.js Force display

Question

Mi piacerebbe fare qualcosa di un po 'fuori dal comune con layout di forza (per visualizzare grafici). Le costellazioni e tutte sono divertenti da guardare, ma per i dati di timeseries, non è così utile. Mi piacerebbe essere in grado di vincolare il layout per alcuni assi, ad esempio, disponendo i nodi in base al momento in cui appaiono in un set di dati, pur mantenendo il "rimbalzo" della visualizzazione. È possibile usare d3?

Answer 1

Per elaborare il mio commento, sì, questo è perfettamente possibile. La disposizione della forza in effetti non posiziona i nodi stessi, ma calcola semplicemente le posizioni. Nel gestore dell'evento tick di solito viene fornita la funzione che si occupa del posizionamento. Qui puoi aggiungere vincoli arbitrari che limitano il modo in cui i nodi possono muoversi.

Assumendo uno degli stock examples, è possibile eseguire operazioni come la seguente per limitare la coordinata x a + -10 della posizione desiderata con y illimitata.

force.on("tick", function() { 
    node.each(function(d) { 
    var intended = scale(d.value); 
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px)); 
    }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 

Ecco un altro example che utilizza il layout forza per etichette di posizione. Lì, la posizione x viene ignorata (cioè costante) e solo il y è influenzato dal layout.

Answer 2

Webcola è un ottimo strumento per la creazione di layout basati su vincoli con D3.JS.

Vedi https://github.com/tgdwyer/WebCola