Efekt lupy dla wizualizacji sieci ukierunkowanej D3/GraphGL?

Question

Czy jest możliwe utworzenie gładkiego animowanego efektu powiększania (podobnego do dok w systemie Mac OS X) podczas ustawiania kursora nad węzłami w wizualizacji graficznej ukierunkowanej na siłę przy użyciu bibliotek D3 lub GraphGL?

Węzły będą musiały rozwinąć i przesunąć pozostałe wokół niego, zachowując układ ukierunkowany na siłę.

Jeśli ktoś mógłby fork this wykazać, że byłoby wspaniale! Dzięki

uwaga, to jest inna od prostego jak zoom w this question

Answer 1

wielkie pytanie. Aby na nie odpowiedzieć, zaimplementowałem D3 plugin dla fisheye distortion. Z grubsza opiera się na wcześniejszych pracach w Flare i Sigma.js, które są z kolei oparte na pracach Sarkara i Browna, "Graphical Fisheye Views of Graphs", CHI'92.

Oto quick demo ze zbiorem danych o błędach. Wyświetl źródło kodu. Zrobię to później, póki mam czas.

Uwaga: to wykorzystuje statyczny rozkład siły; układ jest obliczany przy uruchomieniu i nie zmienia się. Myślę, że jest to prawdopodobnie to, co chcesz w połączeniu z zniekształceniem rybiego oka, inaczej zniekształcenie będzie konkurować z twoją zdolnością do dynamicznego przemieszczania węzłów. Ale teoretycznie można je łączyć, jeśli tego chcesz.

Answer 2

czystym CSS może to zrobić, jeśli go zaakceptować.

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

Jest używany na mojej stronie głównej tuoxie.me

Answer 3

Byłoby niesamowite, jeśli można to zrobić z czystym CSS, ale niestety wygląda na to atrybuty dla poszczególnych elementów SVG (tj kręgów) nie są osiągalne za pomocą CSS. W szczególności "promień", ale myślę, że dotyczy to całego szeregu właściwości elementów SVG.

Ale nie jest to zbyt trudne do zrobienia przez d3. Oto my example jsfiddle. Zasadniczo wykonaj następujące czynności:

1. Użyj przejść (zobacz Tutorial #2, aby dowiedzieć się, jak z nich korzystać). Zasadniczo wykonaj d3element.transition().delay(300).attr(...), aby wprowadzić zmiany.
2. Utrzymanie kółek "wysadzonych w powietrze" z nakładania się na najlepsze, co mogłem wymyślić, to zmodyfikować ustawienie force layout's charge. Zwiększenie sił odpychających, gdy koła są większe.

Mam nadzieję, że to jest to, czego szukasz ...