Hinzufügen von Kraft gerichteten Algorithmus zu Raphael SVG Objekte

Ich baue eine Benutzeroberfläche mit Raphael JS. Derzeit habe ich ein .js Skript, das alles mit Raphael JS 2.1 genau nach Bedarf herauszieht. Da die Zeichnung jedoch von dynamischen Daten gesteuert wird, ist es sehr wahrscheinlich, dass sich Objekte überlappen. Wenn Sie den Objekten das d3.js-Force-Layout hinzufügen, werden sie automatisch gestreut, so dass es keine Überlappung verschiedener UX-Komponenten gibt. Allerdings konnte ich das d3.js-Force-Layout nicht auf von Raphael gezeichnete SVG-Objekte anwenden.Hinzufügen von Kraft gerichteten Algorithmus zu Raphael SVG Objekte

Ich habe ein grundlegendes Beispiel mit JSFiddle here erstellt. Ich habe die d3.js collision detection example als "Vorlage" verwendet.

Quelle

2012-04-04 b_dubb

Ich habe Ihr Beispiel festgelegt und veröffentlicht das Ergebnis bei http://jsfiddle.net/gn6tZ/6/. Sie hatten einen kleinen Tippfehler in Ihrer Kollisionsfunktion (- y anstelle von - r). Wenn Sie die Knoten aktualisieren möchten, nachdem das Force-Layout ausgeführt wurde, müssen Sie die Aktualisierungsfunktion mit den neuen Daten versorgen.

var nodes = circleHolder.nodes(); 

force.on("tick", function(e){ 
    var q = d3.geom.quadtree(nodes), 
     i = 0, 
     n = nodes.length; 

    while(++i < n) { 
    q.visit(collide(nodes[i])); 
    } 

    d3.selectAll('circle') 
     .data(nodes) 
     .attr("cx", function(d) { return d.x; }) 
     .attr("cy", function(d) { return d.y; }); 

});

Quelle

2012-05-05 21:03:42 Bill

gut gemacht genau das, was ich erreichen wollte –

Irgendeine Idee, wie ich dieses Beispiel anpassen könnte, um ein erzwungenes Layout zwischen Gruppen von Formen zu erstellen? Sagen wir, dass eine Gruppe aus einer Rechteckform und einem Text besteht gestalten. – Zan

-1

Eines der Beispiele: Force-Directed Graph

Quelle

2012-04-04 19:41:49 mihai

von dem, was ich weiß, von Raphael und was ich in diesem Beispiel sehe ich sehe nicht, wie ich anpassen kann, was ich mit d3 arbeiten müssen. Kannst du mich in die richtige Richtung weisen? –

Sie können die Zeichnung mit Raphael machen und d3 von dort übernehmen lassen. Leider bin ich nicht gut in jedem von ihnen :(. Sind Sie beschränkt auf die Verwendung von Raphael? – mihai

Ich habe bereits ein Skript geschrieben, das alles tut, was ich brauche. An diesem Punkt möchte ich nur einen kraftgerichteten Algorithmus hinzufügen, so dass mein Raphael Objekte überlappen sich nicht –

Hinzufügen von Kraft gerichteten Algorithmus zu Raphael SVG Objekte

Antwort

Verwandte Themen