Efeito de ampliação para visualização de rede direcionada à força D3/GraphGL?

Question

É possível criar um efeito de ampliação animado suave (semelhante ao dock no Mac OS X) ao passar o mouse sobre os nós em uma visualização gráfica direcionada à força usando o D3 ou GraphGL bibliotecas?

Os nós precisariam se expandir e deslocar os outros ao seu redor, mantendo ao mesmo tempo o layout direcionado pela força.

Se alguém pudesse garfo isso para demonstrar, isso seria ótimo!Obrigado

observe que isso é diferente de um zoom simples como em essa questão

Answer 1

Grande pergunta. Para responder, eu implementei um d3 plugin para distorção de fisheye . É aproximadamente baseado no trabalho anterior em Flare e Sigma.js, que são, por sua vez, com base no trabalho de Sarkar e Brown, " Visualizações gráficas de fisheye dos gráficos ", chi'92.

Aqui está um Demo Quick Com o DataSet MiséRables. Ver fonte para o código. Eu farei um writeup mais tarde hoje quando tiver tempo.

Nota: Isso usa um layout de força estática; O layout é calculado na inicialização e não muda. Eu acho que isso é provavelmente o que você quer em conjunto com a distorção de fisheye, ou então a distorção competirá com sua capacidade de mover os nós em torno dinamicamente. Mas em teoria é possível combiná-los, se é isso que você quer.

Answer 2

Seria incrível se você pudesse fazer isso com CSS puro, mas infelizmente parece que atributos para vários elementos SVG (ou seja, círculos) não são acessíveis via CSS.Especificamente 'raio', mas acho que isso é verdade para uma série de propriedades de elementos SVG.

Mas não é muito difícil de fazer via d3.Aqui está meu exemplo jsfiddle.Basicamente você faz o seguinte:

1. Use transições (veja Tutorial #2 para aprender como usá-los).Basicamente faça um d3element.transition().delay(300).attr(...) para fazer as mudanças acontecerem.
2. Para evitar que os círculos 'explodidos' se sobreponham, o melhor que consegui fazer foi modificar o forçar carga do layout contexto.Aumentando as forças repulsivas quando os círculos são maiores.

Espero que seja isso que você está procurando...

Answer 3

CSS puro pode fazer isso se você aceitar.

.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);
}

É usado na minha página inicial tuoxie.me