D3.JS Forcer un graphique dirigé, réduisez les traversées des bords en faisant des bords se repousser les autres

Question

Donc, j'ai déjà une page qui dessine un graphique dirigé par la force, comme celui montré ici .

Et cela fonctionne bien. J'utilise le JS de ici , avec quelques modifications pour diffuser légèrement les nœuds légèrement plus agréables.

Ce sont plus ou moins les seules différences:

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .gravity(0.1)
      .charge(-2000)
      .linkDistance(1)
      .linkStrength(0.1)
      .nodes(json.nodes)
      .links(json.links)
      .size([w, h])
      .start();

Là où la réduction de la force de liaison semble rendre les liens plus ressemblant à des ressorts, il devient donc similaire à la technique Fruchterman & Reingold Technique souvent utilisée. Cela fonctionne assez bien, mais uniquement pour des graphiques assez petits. Avec des graphiques plus gros, le nombre de traversées monte simplement - comme on pourrait s'y attendre, mais la solution qu'elle atterrit est normalement loin d'être optimale. Je ne cherche pas une méthode pour obtenir la solution optimale, je sais que c'est très difficile. J'aimerais juste que cela ait un peu d'ajout brut qui tente de forcer les lignes à distance ainsi que les nœuds.

Existe-t-il un moyen d'ajouter une répulsion entre les liens, ainsi qu'entre les nœuds? Je ne connais pas la manière dont la force de D3 fonctionne, et Je n'arrive pas à trouver quelque chose qui dit que c'est possible ...

Answer 1

Quelque chose qui pourrait être plus facile que d'essayer de repousser de force les bords consiste à vider les nœuds jusqu'à ce que la quantité de lignes de croisement dans le système soit inférieure.

http://fr.wikipedia.org/wiki/simulé_annealing

Commencez avec les nœuds avec la moindre quantité de connexions et rive.

Si vous essayez d'utiliser les bords comme nœuds, je suppose que vous allez simplement obtenir les mêmes problèmes de verrouillage spatial. La solution consiste à déterminer où il y a des intersections de bord et si elles peuvent être résolues. Vous trouverez peut-être que la résolution de plusieurs des traversées de bord n'est pas possible

Une approche plus latérale de la visualisation consiste à l'animer de telle sorte qu'il ne montre qu'un sous-ensemble des nœuds et des connexions à la fois. Ou pour rendre les bords transparents jusqu'à ce que l'utilisateur place la mise au point de la souris sur un nœud, qui pointez les bords associés deviennent plus visibles.

Answer 2

J'ai suivi l'exemple de l'éditeur de force et j'ai vu ce réglage charge et linkDistance valeurs résout le problème.

  ...
  .charge(-200)
  .linkDistance(50)
  ...

Capture d'écran: