Effet de la grandeur pour la visualisation du réseau dirigé par D3 / GraphGl Force?

Question

Est-il possible de créer un effet d'agrandissement animé fluide (similaire à la station d'accueil sur Mac OS X) lors de la survol des nœuds dans une visualisation du graphique dirigée par la force en utilisant le D3 ou GraphGL bibliothèques?

Les nœuds devraient se développer et déplacer les autres autour de lui, tout en maintenant la disposition dirigée par la force.

Si quelqu'un pouvait Fourk ceci Pour démontrer, ce serait génial! Merci

Remarque, c'est différent d'un simple zoom comme dans cette question

Answer 1

Grande question. Pour y répondre, j'ai implémenté un Plugin D3 pour distorsion fisheye. Il est à peu près basé sur des travaux antérieurs dans Flare et Sigma.js, qui sont à leur tour basés sur le travail de Sarkar et Brown, "Vues de pêche graphiques des graphiques", Chi'92.

Voici un démo rapide avec l'ensemble de données Misérables. Affichez la source du code. Je ferai un article plus tard dans la journée quand j'aurai le temps.

Remarque: Cela utilise une disposition de force statique; La mise en page est calculée au démarrage et ne change pas. Je pense que c'est probablement ce que vous voulez en conjonction avec la distorsion de Fisheye, sinon la distorsion rivalisera avec votre capacité à déplacer dynamiquement les nœuds. Mais en théorie, il est possible de les combiner, si c'est ce que vous voulez.

Answer 2

Ce serait incroyable si vous pouviez le faire avec du CSS pur, mais malheureusement, il semble que les attributs pour divers éléments SVG (c.-à-d. Les cercles) ne sont pas accessibles via CSS. Plus précisément «rayon», mais je pense que cela est vrai pour toute une série de propriétés des éléments SVG.

Mais ce n'est pas super difficile à faire via D3. Voici mon exemple jsfiddle. Fondamentalement, vous faites ce qui suit:

1. Utilisez des transitions (voir Tutoriel n ° 2 pour apprendre à les utiliser). Fondamentalement faire un d3element.transition().delay(300).attr(...) pour apporter les changements.
2. Pour empêcher les cercles «soufflés» de se chevaucher le meilleur que je pouvais trouver à faire était de modifier le Force la charge de la disposition paramètre. Augmenter les forces répulsives lorsque les cercles sont plus grands.

J'espère que c'est ce que vous recherchez ...

Answer 3

Le CSS pur peut le faire si vous l'acceptez.

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

Il est utilisé sur ma page d'accueil tuoxie.me