D3.js force-directed graph, reduzieren Rand Kreuzungen, indem Sie die Kanten abstoßen

Also ich habe eine Seite, die bereits die zieht ein force-directed-graph, wie in der Abbildung hier.

Und das funktioniert auch. Ich bin mit dem JS aus hier, mit ein paar tweaks, um sich auszubreiten die Knoten etwas schöner.

Diese sind mehr oder weniger die einzigen Unterschiede:

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();

Wo die Verringerung der link-Stärke scheint sich das links mehr wie Federn, so wird es ähnlich wie die Fruchterman & Reingold Technik oft verwendet. Das funktioniert auch Recht gut, aber nur für relativ kleine Graphen. Bei größeren Graphen die Anzahl der Kreuzungen geht nur bis - wie man erwarten würde, aber die Lösung es landet normalerweise bei weitem nicht optimal. Ich bin nicht auf der Suche nach einer Methode, um die optimale Lösung, ich weiß, das ist sehr schwierig. Ich möchte nur, es zu haben einige grobe Ergänzung, zu zwingen versucht, die Linien auseinander, ebenso wie Knoten.

Gibt es einen Weg, um eine Abstoßung zwischen in-links, als auch zwischen den Knoten? Ich bin nicht vertraut mit der Art D3-force arbeitet, und ich kann nicht scheinen, etwas zu finden, das sagt, dass das möglich ist...

haben Sie jemals herausfinden?
Leider nicht. Ich wollte nicht gehen, eintauchen in die js-obwohl, wie ich bin nicht vertraut mit der Sprache. Ich habe versucht, mit einer tatsächlichen Fruchterman & Reingold Technik, aber das Ergebnis war noch nicht so gut, als wenn ich zog die Knoten, etwa von hand.
Ich war eigentlich mit networkX (ein python-Modul) und matplotlib, aber Sie haben eine D3.js Beispiel auf Ihrer website, die sieht ganz nett aus, deshalb versuchte ich es.
Visualisierung von großen Graphen ist schwierig... ich weiß, das löst das problem nicht, aber vielleicht finden Sie meine networkX-port hilfreich: felix-kling.de/JSNetworkX. Es nutzt d3 als gut, und Sie können Sie leicht Zoomen in und aus auf die Teile des Graphen, die können es einfacher machen, um es zu untersuchen.
hat das hinzufügen von Funktionalität zu den beiden anderen als die Zoom-in und Zoom-out? Es ist nicht so, dass meine Grafiken ist big persay, dass Sie mehr sind sehr hoch connectd - Sie sind irgendwo in der region von 40 Knoten

InformationsquelleAutor will | 2012-08-17

12

Leider, die Antwort auf Ihre Frage nicht existiert.

Gibt es keinen eingebauten Mechanismus in D3, stößt Kanten oder minimiert edge-Kreuzungen. Sie würde denken, es wäre nicht so schwer zu implementieren, die eine Ladung auf eine Kante, aber wir sind hier.

Darüber hinaus scheint es nicht zu sein, jeder Mechanismus überall, das reduziert die edge-Kreuzungen im Allgemeinen. Ich habe durch Dutzende von Visualisierungs-Bibliotheken und layout-algorithmen, und keiner von Ihnen befassen sich mit reduzieren Rand Kreuzungen auf einem generischen ungerichtete Graphen.

Gibt es eine Reihe von algorithmen für planare Graphen, oder 2-level-Diagramme oder andere Vereinfachungen. dagre funktioniert gut in der Theorie, für 2-level-Graphen, obwohl das völlige fehlen von Unterlagen macht es fast unmöglich, mit zu arbeiten.

Teil der Grund dafür ist, dass das auslegen von Graphen ist schwer. Insbesondere die Minimierung von Rand-Kreuzungen ist NP-hart, so dass ich vermute, dass die meisten layout-Designer-Treffer, problem, bang Ihren Kopf gegen die Tastatur ein paar mal, und geben.

Wenn jemand nicht kommen mit einer guten Bibliothek für diese, bitte veröffentlichen Sie es für den rest von uns 🙂

Zu diesem Schluss kam ich. Manager nicht, wie die Antwort "Können Sie das Diagramm größer Aussehen?" "Nein. Es ist wirklich schwer ein problem.". Sie haben ein Stück software, können Sie simulieren die physics in komplizierte Maschinen, aber Sie können nicht zeichnen, die Ausgabe in einem beliebigen angenehme Art und Weise. Schade.
auf einer anderen Anmerkung obwohl, graphviz ist nun verfügbar unter der epl - Lizenz.

InformationsquelleAutor GreySage
5

Etwas, das könnte einfacher sein als der Versuch, gewaltsam stoßen die Kanten zu wackeln den Knoten herum, bis die Menge von sich kreuzenden Linien in das system niedriger ist.

http://en.wikipedia.org/wiki/Simulated_annealing

Beginnen Sie mit dem Knoten mit der geringsten Menge von verbindungen und wackeln nach unten.

Wenn Sie versuchen, und verwenden Sie die Kanten als Knoten ich vermute, Sie sind nur gehen, um die gleiche räumliche sperren Probleme. Die Lösung ist, herauszufinden, wo es Rand-Kreuzungen, und wenn Sie aufgelöst werden können. Vielleicht finden Sie, dass die Lösung viele der edge crossings ist nicht möglich

Einer mehr seitlichen Ansatz, um die Visualisierung zu animieren, so dass es zeigt nur eine Teilmenge der Knoten und verbindungen zu einem Zeitpunkt. Oder, um die Kanten transparent, bis der Benutzer den Mauszeiger über einen Knoten-Punkt der zugehörigen Kanten mehr sichtbar.

InformationsquelleAutor VoronoiPotato
0

Folgte ich dem Force-Editor-Beispiel, und ich sah, dass die Einstellung charge und linkDistance Werte löst das problem.
```
  ...
  .charge(-200)
  .linkDistance(50)
  ...
```
Screenshot:

Alle änderung der carge tut, ist die Kraft verändern, dass die Punkte sich gegenseitig abstoßen. linkDistance nur noch änderungen, die die ideale Länge von der poitns. Dies funktioniert gut in einem Diagramm, wie das Beispiel, das Sie geben, aber wenn Sie haben ein sehr sehr verbunden mit einer, wie ich es Tue, es funktioniert nicht. Ich werde zu aktualisieren, die Frage, die am Montag mit einigen Beispiel-Daten um das problem zu veranschaulichen. Es ist ein chemisches Reaktions-und die Daten festgelegt, so al lthe Punkte sind verbunden mit mehreren anderen poitns über spezielle Reaktion Punkten.
Benachrichtigen Sie mich, nachdem Sie update-Frage. Vielleicht kann ich helfen. Ich benutze diese Bibliothek in einer Anwendung.
Yah, ich sah Sie an, es zu verwenden, aber festgestellt, dass es im Grunde nicht das richtige Werkzeug für den job, den Graphen will ich darstellen, sind einfach zu verbunden.

InformationsquelleAutor Ionică Bizău
-2

Habe ich 'gelöst' das problem mit dieser:
```
nodes[0].x = width / 2;
nodes[0].y = 100;
nodes[0].fixed = true;
force.on("tick", function(e) {

    var kx = .4 * e.alpha, ky = 1.4 * e.alpha;
    links.forEach(function(d, i) {
      d.target.x += (d.source.x - d.target.x) * kx;
      d.target.y += (d.source.y + 80 - d.target.y) * ky;
    });
    [...]
 }
```
http://mbostock.github.io/d3/talk/20110921/parent-foci.html

Ist es nicht genau das, was wir wollten, aber besser als vorher.
Spürbar ist, dass Sie definieren ein "root"-Knoten und befestigte es.
```
nodes[0].fixed = true;
```
Es so Aussehen mehr wie ein Baum, aber so ist es klarer.

Dies bedeutet nicht, es zu lösen für mein problem. Für dein problem kann es funktionieren, aber ich bin nicht sicher, es würde gearbeitet haben, das mir, da mein grapgh war sehr stark verbunden, während Ihnen ein Baum.
Das problem mit deiner Antwort ist, dass Ihr Diagramm könnte tatsächlich sein, gelayoutet, ohne jede Kreuzung Rand! Und noch schlimmer, in deinem Beispiel gibt es mehrere Kanten kreuzen.

InformationsquelleAutor Baum

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.