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?Constrained d3.js Force display
risposta
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.
Grazie, Lars! Posso chiedere, è: 'var intended = scale (d.value)' dovrebbe essere sostituito da 'var xpos = scale (d.date)' nel mio caso, dove datetime è il valore su cui desidero mettere sul mio asse x? – ericmjl
Non hai pubblicato alcun codice quindi non so quali siano le tue variabili chiamate ma sì, questo designerebbe la posizione x. –
Grazie Lars! Sono stato in grado di provarlo solo dopo aver corretto alcuni altri bug nel mio codice, e funziona provvisoriamente! Ora per modificare le scale per assicurarsi che funzioni correttamente. :-) Grazie ancora! – ericmjl
Webcola è un ottimo strumento per la creazione di layout basati su vincoli con D3.JS.
- 1. D3 Force Ajax grafico aggiornato
- 2. D3 Force Layout Graph - Nodo auto linking
- 3. d3 force directed layout - link distance priority
- 4. D3.js, necessario evento click in d3.js
- 5. D3 JS Data Filtering
- 6. d3.js e document.onReady
- 7. D3.js vs Raphael.js
- 8. d3.js salva stati
- 9. ridimensionamento proiezioni d3.js
- 10. Transizioni D3.js
- 11. geochart in d3.js
- 12. Il layout Force-Directed di d3-js supporta l'immagine come nodo?
- 13. Localizzazione di d3.js (esempio di utilizzo d3.locale)
- 14. D3.js: rimuovere force.drag da una selezione
- 15. Diagramma della forza gerarchica con D3.js
- 16. Visualizzazione D3.js con node.js
- 17. Area impilata in D3.js
- 18. d3.js Comportamento anomalo rotazione
- 19. d3.js GeoJSON e limiti
- 20. Grafici polari con D3.js
- 21. Data ordinamento con d3.js
- 22. d3 js nodi come immagini
- 23. Bounding box in D3.js
- 24. d3.js: come creare "cluster di grafi diretti"
- 25. d3.js Aggiungi un cerchio nel d3.geo.path
- 26. d3.js v4 d3.layout.tree è stato rimosso?
- 27. Grafico piegabile/gerarchico AND diretto alla forza in d3.js
- 28. D3.js: che cos'è 'g' in .append ("g") codice D3.js?
- 29. d3.js & nvd3.js - Come impostare l'intervallo dell'asse y
- 30. d3.js e nvd3.js asse ed etichetta precisione formattazione
Sì, [questa domanda] (http://stackoverflow.com/questions/15100060/d3-js-force-directed-layout-constrained-by-a-shape) dovrebbe dare qualche puntatori. –