¿Efecto de lupa para visualización de red dirigida a fuerza D3/GraphGL?

Question

¿Es posible crear un efecto de aumento animado suave (similar al dock en Mac OS X) cuando se desplaza sobre nodos en una visualización de gráficos dirigidos por fuerza utilizando las bibliotecas D3 o GraphGL?

Los nodos tendrían que expandirse y desplazar a los demás a su alrededor, mientras se mantiene el diseño dirigido por la fuerza.

Si alguien pudiera fork this demostrar, ¡sería genial! Gracias

nota, esto es diferente de un simple zoom como en this question

Answer 1

Muy buena pregunta. Para responderlo, implementé un D3 plugin para fisheye distortion. Se basa más o menos en trabajos anteriores de Flare y Sigma.js, que a su vez se basan en el trabajo de Sarkar y Brown, "Graphical Fisheye Views of Graphs", CHI'92.

Aquí hay un quick demo con el conjunto de datos Misérables. Ver fuente para el código. Escribiré más tarde hoy cuando tenga tiempo.

Nota: esto utiliza un diseño de fuerza estática; el diseño se calcula al inicio y no cambia. Creo que esto es probablemente lo que quieres junto con la distorsión de ojo de pez, o la distorsión competirá con tu capacidad de mover nodos de forma dinámica. Pero en teoría es posible combinarlos, si eso es lo que quieres.

Answer 2

css puro puede hacer esto si lo acepta.

.app{ 
-webkit-transition-property:-webkit-transform; 
-moz-transition-property:-moz-transform; 
-transition-property:-transform; 
-webkit-transition-duration:.15s; 
-moz-transition-duration:.15s; 
-transition-duration:.15s; 
} 

.app:hover{ 
-webkit-transform:scaleX(1.2) scaleY(1.2); 
-moz-transform:scaleX(1.2) scaleY(1.2); 
-transform:scaleX(1.2) scaleY(1.2); 
} 

Se utiliza en mi página de inicio tuoxie.me

Answer 3

Sería sorprendente si se puede hacer esto con CSS puro, pero por desgracia parece que los atributos de varios elementos SVG (es decir, círculos) no son accesible a través de CSS. Específicamente 'radio', pero creo que esto es cierto para una gran cantidad de propiedades de elementos SVG.

Pero no es muy difícil de hacer a través de d3. Aquí está my example jsfiddle. Básicamente hace lo siguiente:

1. Use transiciones (ver Tutorial #2 a aprender a utilizar estos). Básicamente haz un d3element.transition().delay(300).attr(...) para hacer que los cambios sucedan.
2. Para evitar que los círculos "volados" se superpongan, lo mejor que pude hacer fue modificar la configuración force layout's charge. Aumentando las fuerzas de repulsión cuando los círculos son más grandes.

eso es de esperar lo que busca ...