D3.js - È possibile animare tra un grafico orientato alla forza e un albero di collegamento nodo?

Sto usando la biblioteca D3.js e guardando la forza-diretto grafico demo:D3.js - È possibile animare tra un grafico orientato alla forza e un albero di collegamento nodo?

http://mbostock.github.com/d3/ex/force.html

enter image description here

sto anche guardando l'albero dei nodi-link:

http://mbostock.github.com/d3/ex/tree.html

enter image description here

Quello che vorrei fare è:

- Iniziare con il grafico forza-diretto e quando l'utente fa clic su un nodo , lo hanno animato senza intoppi in un albero, con il nodo selezionato al centro. - Quindi, quando l'utente fa clic su uno spazio vuoto nell'area di disegno, lo deve tornare al grafico diretto alla forza.

Qualcuno ha mai fatto qualcosa di simile prima o ha qualche consiglio sull'approccio migliore da adottare? Sono nuovo di D3.js e non ho idea se questo è anche supportato dal framework.

fonte

2012-01-24 Kevin Marzec

Riflettendo, mi sono reso conto che non voglio modificare in modo specifico il grafo forzato in un albero: voglio riposizionare i nodi in modo che il nodo selezionato sia centrato e le sue connessioni siano disposte attorno ad esso, e le loro connessioni intorno a loro, e così via. Quello che penso di voler fare è impostare esplicitamente tutte le coordinate del nodo e le lunghezze dei collegamenti e tenerle fisse. –

Non sono sicuro di capire l'intento qui. Avere "le sue connessioni sono disposte intorno ad esso, e le loro connessioni intorno a loro" quando non si ha a che fare con una struttura gerarchica è esattamente ciò che fa un layout diretto alla forza. Se tutti i nodi e collegamenti sono ancora visibili dopo aver fatto clic? – nrabinowitz

Probabilmente, potresti avere un nodo invisibile con posizione fissa nel mezzo; e ogni volta che l'utente seleziona un nodo - si aggiunge un collegamento (con forza molto più grande di altre forze) tra esso (il centro invisibile) e la selezione.(anche, ogni volta che l'utente seleziona un nuovo nodo - il collegamento precedente deve essere rimosso) – alm

Quello che devi fare è fermare la forza e applicare una trasformazione dei nodi esistenti alla x-y derivata dall'altro layout. Così la funzione sarebbe simile a questa:

force.stop(); 
d3.selectAll("g.nodes").transtion().duration(500) 
    .attr("translate","transform("+newLayoutX+","+newLayoutY+")"

Poi scorrere l'array nodi e impostare le x, y, px, py valori per riflettere il nuovo X e Y. Questo imposterà i nodi di conoscere la posizione corrente x e y per il layout forza quando si esegue force.start()

Si può dare un'occhiata alla funzione plotLayout() in questo esempio:

https://gist.github.com/emeeks/4588962

Questo non lo fa si basano su un secondo d3.layout, però. Il problema che si incontra è che è necessario un set di dati gerarchico per il layout dell'albero, che richiede di trasformare i dati dei nodi e dei bordi in una serie di nodi.children come previsto nei layout gerarchici. Il modo in cui lo farei è duplicare il set di dati e appiattirlo manualmente, ma potrebbe esserci una soluzione più elegante di cui non sono a conoscenza.

fonte

2013-05-06 21:07:26 Elijah

D3.js - È possibile animare tra un grafico orientato alla forza e un albero di collegamento nodo?

risposta

Problemi correlati