Constrained d3.js Force-Anzeige

Question

Ich möchte mit Force-Layouts (zum Visualisieren von Diagrammen) etwas Außergewöhnliches machen. Constellations und alle machen Spaß zu sehen, aber für Zeitreihendaten ist es nicht so hilfreich. Ich möchte in der Lage sein, das Layout um eine Achse zu beschränken, indem ich zum Beispiel die Knoten entsprechend der Zeit, in der sie in einem Datensatz erscheinen, auslege, während ich gleichzeitig die "Bouncyness" der Visualisierung beibehalte. Ist das mit d3 möglich?

Answer 1

Um meinen Kommentar zu erweitern, ja, das ist perfekt möglich. Das Force-Layout positioniert die Knoten selbst nicht, es berechnet lediglich die Positionen. Im Handler des tick Ereignisses stellen Sie normalerweise die Funktion zur Verfügung, die sich um die Positionierung kümmert. Dort können Sie beliebige Einschränkungen hinzufügen, die einschränken, wie sich die Knoten bewegen können.

Mit einem der stock examples, könnten Sie Dinge wie die folgenden tun, um die X-Koordinate innerhalb von + -10 der beabsichtigten Position mit uneingeschränkter y zu beschränken.

force.on("tick", function() { 
    node.each(function(d) { 
    var intended = scale(d.value); 
    d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px)); 
    }); 
    node.attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 
}); 

Hier ist ein weiteres example, die die Kraft Layout Position Etiketten verwendet. Dort wird die x-Position ignoriert (d. H. Konstant) und nur das y wird vom Layout beeinflusst.

Answer 2

Webcola ist ein großartiges Tool zum Erstellen von Constraint-basierten Layouts mit D3.JS.

Siehe https://github.com/tgdwyer/WebCola