Javascript Girl
  1. Javascript Girl
  3. Accélérer la disposition de force d3 avec de nombreux noeuds et liens
Intereting Posts
ClearStock local Comment exposer le comportement d'une directive avec une portée isolée? Array indexOf implémentation pour Internet Explorer Animation JavaScript avec plusieurs setTimeout (1, eval) ('this') vs eval ('this') en JavaScript? Datepicker date d'un jour Débogage d'un crash IE Pourquoi l'extension des objets natifs est-elle une mauvaise pratique? Instancier une promesse résolue dans ES2015 Typeof est un opérateur et une fonction Commencez à télécharger après avoir choisi un fichier, en utilisant jQuery. Renvoie la partie de la regex qui correspond Solution géospatiale de Sailsjs avec ligne de flottaison Récupérer un jeton d'accès à l'aide de l'API Javascript Préserver une référence à "ceci" dans les fonctions de prototypage JavaScript

Accélérer la disposition de force d3 avec de nombreux noeuds et liens

Je voulais produire une visualisation qui contient beaucoup de nœuds avec la disposition de force d3 (plus de 500 cents nœuds). Bien qu'il fonctionne correctement avec jusqu'à 200 cents nœuds, il devient très lent avec environ 500, dans le sens où la mise en page fait un hoquet d'une image à l'autre et que les événements comme mouseover sur les noeuds sont loin d'être réactifs. Cela m'a fait poser plusieurs questions.

  • Existe-t-il une sorte de limite dans le nombre de nœuds après quoi il n'est pas recommandé d'utiliser la disposition des forces? Dans l'affirmative, existe-t-il une autre bibliothèque qui pourrait gérer le travail?

  • Si je voulais accélérer le processus avec d3, quelles parties devraient être optimisées? J'ai essayé de garder l'utilisation du balisage css / attributes minimal (il suffit de donner un rayon et une couleur de remplissage aux nœuds + la largeur du trait et la couleur des traits aux liens) et réduire l'utilisation de l'interaction (événements mouseover), mais pourrait-il y avoir plus d'optimisation À l'objet forcé qui contient toutes les informations? La taille des données doit jouer un rôle déterminant …

Merci pour votre participation !

Une façon de le faire serait de ne traiter pas tous tick événements de tick , mais seulement une fraction d'entre eux, par exemple en ignorant un nombre spécifié ou en adaptant dynamiquement le nombre d'événements en fonction d'autres considérations.

Si vous voulez des mouvements en douceur, ajoutez une transition entre les positions définies dans les événements de tick gérés. Vous pouvez bien sûr combiner ces idées ainsi que sauter les événements pendant que la transition est en cours d'exécution, en traitant le premier après sa fin.