D3.js Dynamischer Konnektor zwischen Objekten

Question

Ich bin sehr neu in JS und D3, und ich habe diese eine Tonne gegoogelt, aber nur Beispiele gefunden, die ein bisschen zu weit fortgeschritten sind.

Ich mache eine einfache Entscheidung Graph Implementierung, und ich bin stecken stecken versucht, 2 Knoten mit einer Linie/Pfad zu verbinden. Die Objekte können mit der Maus verschoben werden und der Pfad sollte immer aktualisiert werden, um die Positionen der Objekte zu reflektieren.

Dies ist meine Basisquelle des Wissens: https://github.com/mbostock/d3/wiki/SVG-Shapes, aber ich verstehe nicht ganz, wie man etwas klug damit macht.

Hier ist, was ich bisher: http://jsbin.com/AXEFERo/5/edit

Sie das fancy stuff nicht brauchen, müssen nur verstehen, wie Anschlüsse erstellen und sie dynamisch aktualisiert, wenn die Objekte in der Umgebung gezogen werden. Vielen Dank!

Answer 1

Um eine Linie zwischen den Kreisen zu zeichnen, brauchen Sie nichts besonderes - nur das line Element.

var line = svg.append("line") 
     .style("stroke", "black") 
     .attr("x1", 150) 
     .attr("y1", 100) 
     .attr("x2", 250) 
     .attr("y2", 300); 

Die dynamische Aktualisierung der Position ist etwas schwieriger. Im Moment haben Sie keine Möglichkeit zu unterscheiden, welcher der Kreise gezogen wird. Eine Möglichkeit, dies zu tun, besteht darin, den Elementen g eine Unterscheidungsklasse hinzuzufügen.

var g1 = svg.append("g") 
     .attr("transform", "translate(" + 150 + "," + 100 + ")") 
     .attr("class", "first") 
     ... 

und in ähnlicher Weise für die andere. Jetzt können Sie die Klasse in Ihrer dragmove Funktion einschalten und entweder die Anfangs- oder die Endkoordinate der Linie aktualisieren.

if(d3.select(this).attr("class") == "first") { 
      line.attr("x1", x); 
      line.attr("y1", y); 
} else { 
      line.attr("x2", x); 
      line.attr("y2", y); 
} 

Vollständiges Beispiel here. Es gibt andere, elegantere Wege, dies zu erreichen. In einer realen Anwendung hätten Sie Daten an die Elemente gebunden und könnten diese verwenden, um zwischen den verschiedenen Kreisen zu unterscheiden.