2013-05-15 9 views
14

Ich verwende das Force-Layout, um ein gerichtetes ungewichtetes Netzwerk darzustellen. Meine Inspiration kommt aus dem folgende Beispiel: http://bl.ocks.org/mbostock/1153292Erlaubt d3.js erzwingen Layout dynamische LinkDistance?

enter image description here

Mein Problem ist, dass es in meinem Fall viel mehr Verbindungen zwischen den Knoten, und ich habe das Gefühl, dass eine feste linkDistance geben, die immer das gleiche ist, a sehr große Einschränkung für mein Layout.

Ist es möglich, eine dynamische linkDistance, so dass eine Verbindung in der Länge wächst, wenn es nützlich ist, Link-Kreuzung innerhalb der Grafik zu reduzieren?

Antwort

14

Von the documentation:

force.linkDistance ([Distanz])

Wenn der Abstand festgelegt ist, setzt den Zielabstand zwischen verknüpften Knoten auf den angegebenen Wert. Wenn die Entfernung nicht angegeben ist, wird die aktuelle Verbindungsdistanz des Layouts zurückgegeben, die standardmäßig auf 20 eingestellt ist. Wenn die Entfernung konstant ist, haben alle Verbindungen die gleiche Entfernung. Andernfalls, wenn der Abstand eine Funktion ist, wird die Funktion für jeden Link (in der Reihenfolge) ausgewertet, wobei der Link und sein Index mit diesem Kontext als Force-Layout übergeben werden; Der Rückgabewert der Funktion wird dann verwendet, um die Entfernung jeder Verbindung einzustellen. Die Funktion wird beim Start des Layouts ausgewertet. Normalerweise wird die Entfernung in Pixeln angegeben. Die Einheiten sind jedoch relativ zur Größe des Layouts beliebig.

Beachten Sie, dass die Linkentfernung noch angepasst wird, während das Layout ausgeführt wird. Sie können auch die Einstellung linkStrength() nützlich finden.

+0

So meinen Sie, dass LinkDistance ändert, während der Algorithmus ausgeführt wird. Ich wusste es nicht. Bedeutet eine linkStrength gleich 1, dass sich der Abstand zwischen den Knoten nicht ändert? –

+0

Nein, das Force-Layout passt immer die Entfernung an (zumindest potentiell), um die anderen Bedingungen zu erfüllen. –

+1

Was bedeutet linkStrength? Ich kann nicht verstehen, was die "Starre" ist, auch wenn ich gemerkt habe, dass mir eine untere LinkStrength sehr hilft. –

6

Nur zwei Schritte:

Schritt 1: ein Parameter in Haupt json hinzufügen wie folgt:

{Quelle: "Microsoft", Ziel: "Amazon", Typ: "Lizenzierung", Wert: 60} , {source: "Microsoft", ziel: "HTC", typ: "licensing", wert: 60}, {source: "Samsung", ziel: "Apple", typ: "suit", wert: 60} ,

Schritt2: Update Linkdistance zu akzeptieren Methode.

.linkDistance(function(d) { return d.value; })