D3.js - ¿Es posible animar entre un gráfico dirigido por fuerza y ​​un árbol de enlace de nodo?

Question

estoy usando la biblioteca D3.js y mirando a la demo gráfico de la fuerza dirigida:

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

También estoy buscando en el árbol de nodos-link:

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

Lo que me gustaría hacer es:

- Comenzar con el gráfico de la fuerza dirigida y cuando el usuario hace clic en un nodo , tienen animada suavemente en un árbol, con el nodo seleccionado en el centro. - Luego, cuando el usuario hace clic en cualquier espacio vacío en el lienzo, debe animar de nuevo al gráfico de fuerza dirigida.

¿Alguien ha hecho algo como esto antes, o tiene algún consejo sobre el mejor enfoque para tomar? Soy nuevo en D3.js y no tengo idea si esto es incluso compatible con el marco.

Answer 1

Lo que necesita hacer es detener la fuerza y ​​aplicar una transformación de los nodos existentes a la x-y derivada de la otra disposición. Por lo que su función se vería así:

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

A continuación, iterar a través de la matriz de nodos y establecer los x, y, px, py valores para reflejar el nuevo X y Y. Esto establecerá sus nodos para conocer la posición actual x y y para el diseño de la fuerza cuando se ejecuta force.start()

Puede echar un vistazo a la función plotLayout() en este ejemplo:

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

Esto no lo hace sin embargo, confíe en un segundo d3.layout. El problema con el que se encontrará es que necesita un conjunto de datos jerárquico para el diseño del árbol, que requiere que transforme sus datos de nodos y bordes en una matriz de node.children como se esperaba en los diseños jerárquicos. La forma en que lo haría es duplicar el conjunto de datos y aplanarlo manualmente, pero puede que haya una solución más elegante que desconozco.