Effetto ingranditore per la visualizzazione della rete D3 / Graphgl Force?

Question

È possibile creare un effetto di ingrandimento animato fluido (simile al dock su Mac OS X) quando si aggirano i nodi in una visualizzazione del grafico diretto dalla forza utilizzando le librerie D3 o GraphGL?

I nodi dovrebbero espandere e spostare gli altri intorno ad esso, mantenendo il layout diretto dalla forza.

Se qualcuno potesse Forchetta questa per dimostrare, sarebbe fantastico!Grazie

Nota, questo è diverso da uno zoom semplice come in Questa domanda

Answer 1

Grande domanda. Per rispondere, ho implementato un D3 Plugin per distorsione fisheye . È approssimativamente basato sul lavoro precedente in Flare e Sigma.js, che sono a loro volta in base al lavoro di Sarkar e Brown, " Graphical Fisheye Views of Graphs ", chi'92.

Ecco un DEMO Quick con il set di dati Misérables. Visualizza la fonte per il codice. Farò una scrittura più tardi oggi quando ho tempo.

Nota: questo utilizza un layout di forza statica; Il layout è calcolato all'avvio e non cambia. Penso che questo sia probabilmente quello che vuoi in combinazione con la distorsione fisheye, oppure la distorsione competerà con la tua capacità di spostare i nodi intorno dinamicamente. Ma in teoria è possibile combinarli, se è quello che vuoi.

Answer 2

Sarebbe sorprendente se potessi farlo con Pure CSS, ma sfortunatamente sembra attributi per vari elementi SVG (cioè cerchi) non sono raggiungibili tramite CSS.In particolare, il raggio ", ma penso che questo sia vero per tutta la rotazione di proprietà di elementi svg.

Ma non è super difficile da fare tramite D3.Ecco Il mio esempio Jsfiddle .Fondamentalmente fai quanto segue:

.
1. Usa transizioni (vedere tutorial # 2 per imparare come usarequesti).Fondamentalmente eseguire un d3element.transition().delay(300).attr(...) per apportare le modifiche.
2. Per mantenere i cerchi "soffiati" dalla sovrapposizione del meglio che potevo capire per fare da fare era modificare il Forza la carica del layout impostazione.Aumentando le forze repulsive quando i cerchi sono più grandi.

   Speriamo che questo sia quello che stai cercando ...

Answer 3

Pure CSS può farlo se lo accetti.

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

.

È usato sulla mia home page tuossie.me