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

Question

¿Es posible crear un efecto de aumento animado suave (similar al acoplamiento en Mac OS X) al pasar el cursor sobre los nodos en una visualización de gráfico dirigida por la fuerza usando el D3 o GraphGL bibliotecas?

Los nodos necesitarían expandirse y desplazar a los demás a su alrededor, manteniendo al mismo tiempo el diseño dirigido por la fuerza.

si alguien pudiera bifurca esto para demostrarlo, ¡sería genial!Gracias

Tenga en cuenta que esto es diferente de un simple zoom como en esta pregunta

Answer 1

gran pregunta. Para responderlo, implementé una d3 plugin para Distortion Fisheye . Se basa aproximadamente en el trabajo anterior en Flare y Sigma.js, que a su vez se basan en el trabajo de Sarkar y Brown, " Vistas gráficas de ojo de pez de gráficos ", chi'92.

Aquí hay una Demo rápido con el conjunto de datos MISÉRables. Ver la fuente del código. Hoy haré un artículo más tarde hoy cuando tenga tiempo.

NOTA: Esto utiliza un diseño de fuerza estática; El diseño se calcula en el inicio y no cambia. Creo que esto es probablemente lo que usted quiere junto con la distorsión de ojo de pez, o de lo contrario, la distorsión competirá con su capacidad para mover los nodos alrededor dinámicamente. Pero en teoría es posible combinarlos, si eso es lo que quieres.

Answer 2

Sería increíble si pudieras hacer esto con CSS puro, pero desafortunadamente parece que los atributos de varios elementos SVG (es decir, círculos) no son accesibles 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 hacerlo mediante d3.Aquí está mi ejemplo jsfiddle.Básicamente haces lo siguiente:

1. Utilice transiciones (ver Tutorial #2 para aprender a utilizarlos).Básicamente hacer un d3element.transition().delay(300).attr(...) para que los cambios sucedan.
2. Para evitar que los círculos "ampliados" se superpusieran, lo mejor que pude hacer fue modificar el forzar la carga del diseño configuración.Aumentando las fuerzas repulsivas cuando los círculos son más grandes.

Ojalá sea eso lo que estás buscando...

Answer 3

CSS puro puede hacer esto si lo aceptas.

.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 usa en mi página de inicio tuoxie.me