Lupeneffekt für die erzwungene D3/GraphGL-Netzwerkvisualisierung?

Question

Ist es möglich, einen sanften animierten Vergrößerungseffekt zu erzeugen (ähnlich dem Dock unter Mac OS X), wenn man mit der Maus über Knoten in einer kraftgesteuerten Diagrammvisualisierung fährt? D3 oder GraphGL Bibliotheken?

Die Knoten müssten sich ausdehnen und die anderen um sie herum verdrängen, während das kraftgesteuerte Layout beibehalten werden müsste.

Wenn jemand könnte Gabel das zu demonstrieren, das wäre toll!Danke

Beachten Sie, dass sich dies von einem einfachen Zoom wie in unterscheidet diese Frage

Answer 1

Tolle Frage. Um es zu beantworten, habe ich ein d3 plugin für fisheye verzerrung . Es basiert auf früheren Arbeiten in Flare und Sigma.js, die wiederum basierend auf der Arbeit von Sarkar und Braun, " grafische Fischauge Ansichten von Graphen ", chi'92.

Hier ist ein schneller Demo mit dem Misérables-Datensatz. Quelle anzeigen für den Code. Ich werde später ein Alkohol-Up tun, wenn ich Zeit habe.

Hinweis: Dies verwendet ein statisches Kraftlayout; Das Layout wird beim Start berechnet und ändert sich nicht. Ich denke, das ist wahrscheinlich das, was Sie in Verbindung mit Fisheye-Verzerrungen wünschen, oder die Verzerrung wird mit Ihrer Fähigkeit mit Ihrer Fähigkeit konkurrieren, Knoten dynamisch zu bewegen. Aber in der Theorie ist es möglich, sie zu kombinieren, wenn dies das ist, was Sie wollen.

Answer 2

Es wäre erstaunlich, wenn Sie dies mit reinem CSS tun könnten, aber leider sieht es so aus, als ob Attribute für verschiedene SVG-Elemente (z. B. Kreise) nicht über CSS erreichbar sind.Insbesondere „Radius“, aber ich denke, dass dies für eine ganze Reihe von SVG-Elementeigenschaften gilt.

Aber es ist nicht besonders schwer, es über d3 zu machen.Hier ist mein Beispiel jsfiddle.Grundsätzlich gehen Sie wie folgt vor:

1. Verwenden Sie Übergänge (siehe Anleitung Nr. 2 um zu lernen, wie man diese verwendet).Machen Sie im Grunde eine d3element.transition().delay(300).attr(...) um die Veränderungen herbeizuführen.
2. Um zu verhindern, dass sich die „aufgeblasenen“ Kreise überlappen, habe ich am besten das geändert Ladung des Kraftlayouts Einstellung.Bei größeren Kreisen nehmen die Abstoßungskräfte zu.

Hoffentlich ist es das, wonach Sie suchen ...

Answer 3

Pure CSS kann dies tun, wenn Sie es akzeptieren. generasacodicetagpre.

Es wird auf meiner Startseite verwendet tuoxie.me