2012-03-28 9 views
13

Ich versuche, eine Kraft gerichteten Graphen mit d3.layout.force zu machen, und ich brauche den Container in der Größe veränderbar sein - das wäre ich in der Lage, geeignete Ladung und LinkDistance Werte basierend berechnen zu können die größe, oder d3 mache es für mich auf magische weise. die nur Knoten verwendet:Ladung basierend auf Größe - d3 Kraft Layout

Ich habe einen Versuch (http://jsfiddle.net/VHdUe/6/ Link) hergestellt. Ich setze die Ladung auf einen Wert, der auf der Anzahl der Knoten basiert, die über den Radius des Kreises passen würden, der dazu neigt, wie geformt zu sein.

Die Lösung arbeitet für einige mittelgroße Behälter, aber wenn Sie ein paar Mal die Größe klicken, können Sie sehen, es ist nicht wirklich für alle Größen funktioniert ...

Der einzige Weg nach vorne kann ich sehen, ist Verwenden Sie eine Svg-Skala-Transformation, die die Größe meiner Elemente ungünstig versauen wird. Irgendwelche anderen Wahlen?

PS: Ich habe http://mbostock.github.com/d3/talk/20110921/bounding.html (die Antwort auf D3 force directed layout with bounding box) gesehen, aber ich hätte lieber eine Schwerkraft-basierte Lösung als eine Bounding-Box.

+0

http://bl.ocks.org/mbostock/1129492 – weltschmerz

Antwort

20

Zusätzlich zu charge und linkDistance haben Sie auch gravity. Wenn das Diagramm die gleiche relative Dichte wie die Layoutgröße beibehalten soll, sollten Sie sowohl die Ladung als auch die Schwerkraft skalieren. Dies sind die beiden wichtigsten Rechenkräfte, die die Gesamtgröße des Blobs bestimmen. Weitere Informationen finden Sie unter my force layout talk.

habe ich versucht, ein paar verschiedene Versionen, und dieser schien ziemlich gut zu funktionieren:

var k = Math.sqrt(nodes.length/(width * height)); 

layout 
    .charge(-10/k) 
    .gravity(100 * k) 

Hier nodes.length/(width * height) die grafische Darstellung Dichte linear proportional ist: der Bereich der durch die Fläche des Layouts aufgeteilt Knoten. Die Aufladungskraft folgt der inverse-square law, also könnte das erklären, warum die Quadratwurzel gut funktioniert. Die "Schwerkraft" von D3 ist eine virtuelle Feder, die linear mit der Entfernung vom Layoutzentrum skaliert. Dadurch erhöht sich auch die Schwerkraft, wenn der Graph dichter wird und Knoten davon abgehalten werden, die Begrenzungsbox zu verlassen.

+0

das genug fantastisch, sicherlich gut aussieht unsere Fälle zu decken. Ich werde es auch für sinnvolle Verbindungsstrecken verlängern, aber das sollte einfach sein. Vielen Dank! – XwipeoutX

+0

@XwipeoutX, könnten Sie bitte mitteilen, mit welcher Heuristik Sie die Linkentfernungen einstellen? Vielen Dank! – skyork

+0

Tut mir leid, @skyork - wir haben die Unterstützung für den Force-gerichteten Graphen in dem, was wir getan haben, fallen gelassen, also habe ich nichts mehr für dich. Die Daten, die wir verwendeten, waren nicht wirklich gut für mehr als "oh, das sieht glänzend aus", also habe ich leider nicht allzu viel Zeit damit verbracht. – XwipeoutX