D3.js Dynamischer Verbinder zwischen Objekten

Ich bin sehr neu für JS und D3, und ich habe gegoogelt, diese tonne aber nur Beispiele gefunden, die sind ein bisschen zu Fortgeschritten.

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

Dies ist meine Basis Quelle des Wissens: https://github.com/mbostock/d3/wiki/SVG-Shapes, aber ich verstehe nicht ganz, wie etwas zu tun smart.

Hier ist was ich habe, so weit: http://jsbin.com/AXEFERo/5/edit

Nicht brauchen, die fancy stuff, brauchen nur zu verstehen, wie Sie einen Connector erstellen und diese dynamisch aktualisiert, wenn die Objekte werden verschoben. Vielen Dank!

InformationsquelleAutor babyjet | 2013-09-07

  1. 8

    Zeichnen Sie eine Linie zwischen den Kreisen, die Sie nicht benötigen, nichts besonderes -- nur der line element.

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

    Aktualisierung der position dynamisch ist ein bisschen schwieriger. In dem moment, Sie haben kein Mittel, zu unterscheiden, welche von den Kreisen gezogen wird. Eine Möglichkeit dies zu tun ist, um eine Unterscheidung von Klasse, um die g Elemente.

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

    und ähnlich für die anderen. Jetzt können Sie schalten Sie die Klasse in Ihrem dragmove Funktion, und aktualisieren Sie entweder die start-oder den end-Koordinaten der Linie.

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

    Komplettes Beispiel hier. Es gibt andere, elegantere Wege, dies zu erreichen. In einer echten Anwendung würde Daten an die Elemente und verwenden könnte, zu unterscheiden zwischen den verschiedenen Kreisen.

    Toll, nur die Grundlagen, die ich wollte!!! Die "elegantere Wege", hätten Sie eine ähnliche Haupt-oder sind Sie völlig anders? Haben Sie irgendwelche relevanten links oder Schlüsselwörter in Bezug auf das? Nochmals vielen Dank...
    Das Prinzip wäre das gleiche. Haben Sie einen Blick auf die force-directed-layout ein komplexeres Beispiel.
    dies ist ein sauberes und nützliches Beispiel, aber ich kann nicht sehen, warum bist du mit dem g-Elemente hier. Warum nicht die Kreise direkt zum hinzufügen von Klassen etc? Wie ist dieser Ansatz impliziert eine Gruppe pro element, das irgendwie beseitigt der springende Punkt, der Gruppen wie auch, wäre es nicht? Es ist wahrscheinlich eine implizite Referenz auf eine beste Praxis hier, aber ich kann es nicht sehen. Könnten Sie erläutern, bitte?
    Du hast Recht, dass es keine Notwendigkeit gibt, für Gruppen, die in diesem speziellen Beispiel könnte man nur die Kreise.
    vielen Dank für so eine prompte Antwort!

    InformationsquelleAutor Lars Kotthoff

Schreibe einen Kommentar