d3.js - library - Transición suave entre diseños de árbol, clúster, árbol radial y clúster radial

javascript graphics library

Question

Para un proyecto, necesito cambiar de forma interactiva el diseño de datos jerárquico de una visualización, sin ningún cambio de los datos subyacentes. Los diseños capaces de cambiar entre sí deben ser árbol, clúster, árbol radial y clúster radial. Y la transición debe ser preferentemente una animación.

Pensé que sería una tarea relativamente fácil con D3 . Comencé, pero me perdí en las traducciones y rotaciones, enlaces de datos y similares, así que le pido ayuda. Además, probablemente estoy haciendo algo que no está en el espíritu de D3, lo cual es malo ya que estoy buscando una solución limpia.

jsfidle un jsfidle , pero es solo un punto de partida, con botones de radio agregados, un pequeño conjunto de datos conveniente y un diseño de grupo inicial, solo para ayudar a cualquiera que quiera echarle un vistazo a esto. ¡Gracias por adelantado!

ACTUALIZAR:

Quería concentrarme solo en los enlaces, así que deshabilité temporalmente otros elementos. Sobre la base del método @AmeliaBR, se obtienen las siguientes animaciones:

Aquí se actualiza jsfiddle .

ACTUALIZACIÓN 2:

Ahora con círculos: (disculpe mi elección de colores)

{doom-duba-doom}

Aquí hay un jsfiddle más actualizado .

Answer 1

No tengo la reputación suficiente para hacer un comentario ... así que, solo estoy dando esta pequeña contribución como una pseudo-respuesta. Después de ver esta post , y basándome en el perfecto comentario de @ VividD sobre lo simples que resultaron las transiciones, simplemente agregué la opción Árbol Vertical a las transformaciones en este fiddle .

La adición es simplemente esto:

var diagonalVertical = d3.svg.diagonal()
.projection(function (d) {
return [d.x, d.y];
});

De todos modos, he marcado esta interacción altamente instructiva.

Answer 2

No veo por qué sería tan difícil siempre que todos sus diseños tengan la misma estructura general de rutas de enlace, nodos circulares y etiquetas de texto.

Simplemente asegúrese de que todos sus objetos, incluidas las rutas de enlace, tengan una buena clave de datos que sea independiente de los atributos de datos creados por las funciones de diseño. Luego, para cada transición, actualice los datos con los resultados de la función de diseño apropiada y dibuje ese diseño.

Tengo la transición al árbol radial implementada aquí: http://jsfiddle.net/YV2XX/5/

Clave:

//Radial Tree layout//
var diameter = 500;
var radialTree = d3.layout.tree()
.size([360, diameter / 2 ])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });
var radialDiagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
function transitionToRadialTree() {
var nodes = radialTree.nodes(root), //recalculate layout
links = radialTree.links(nodes);
svg.transition().duration(1500)
.attr("transform", "translate(" + (diameter/2)
+ "," + (diameter/2) + ")");
//set appropriate translation (origin in middle of svg)
link.data(links, function(d){
return d.source.name + d.target.name;})
.transition().duration(1500)
.attr("d", radialDiagonal); //get the new radial path
node.data(nodes, function(d){
return d.name ;})
.transition().duration(1500)
.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
node.select("circle")
.transition().duration(1500)
.attr("r", 4.5);
node.select("text")
.transition().duration(1500)
.attr("dy", ".31em")
.attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
.attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
};

El código de diseño es todo de http://bl.ocks.org/mbostock/4063550 , acabo de cambiarlo para que sea una actualización en lugar de una inicialización.

También tenga en cuenta que he movido la declaración de variable para la root fuera del método de lectura de datos, por lo que las funciones de transición pueden volver a acceder a ella.

El diseño aún necesita algunas mejoras, pero entiendes la idea.

Ahora, si desea que una de las transiciones sea una partición, un mapa de ruta u otro diseño que no utilice la estructura de enlace de nodo, se vuelve más complicado ...