D3.js lien Dynamique entre les objets

Je suis très nouveau pour les deux JS et D3, et j'ai googlé ce une tonne, mais seulement trouvé des exemples qui sont un peu trop avancé.

Je suis en train de faire une simple décision graphique de la mise en œuvre, et je suis coincé à essayer de connecter 2 nœuds, avec un line /chemin d'accès. Les objets peuvent être déplacés avec la souris, et le chemin d'accès doit toujours mettre à jour afin de refléter les positions des objets.

C'est ma source de base de connaissances: https://github.com/mbostock/d3/wiki/SVG-Shapes, mais je n'arrive pas à comprendre comment faire quelque chose d'intelligent avec.

Voici ce que j'ai à ce jour: http://jsbin.com/AXEFERo/5/edit

N'avez pas besoin de fantaisie, juste besoin de comprendre comment créer des connecteurs et de les mettre à jour dynamiquement lorsque les objets sont traîné. Un grand merci!

OriginalL'auteur babyjet | 2013-09-07

  1. 8

    De tracer une ligne entre les cercles, vous n'avez pas besoin de rien de spécial, mais seulement la line élément.

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

    La mise à jour de la position dynamiquement est un peu plus difficile. Pour le moment, vous n'avez aucun moyen de distinguer laquelle des cercles est déplacée. Une façon de le faire est d'ajouter une distinction de classe à la g éléments.

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

    et de même pour l'autre. Maintenant, vous pouvez basculer sur la classe dans votre dragmove de la fonction et de la mise à jour soit au début ou à la fin des coordonnées de la ligne.

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

    Exemple complet ici. Il existe d'autres, plus élégante des façons d'y parvenir. Dans une application réelle, vous avez des données liées à des éléments et pourraient l'utiliser pour distinguer entre les différents cercles.

    Grand, juste l'essentiel je voulais! "La plus élégante des façons", auraient-ils un semblable principal ou sont-ils complètement différents? Avez-vous des liens pertinents ou mots-clés liés à cela? Merci encore une fois...
    Le principe serait le même. Jetez un oeil à la force dirigée mise en page pour un exemple plus complexe.
    c'est un endroit propre et utile, par exemple, mais je ne vois pas pourquoi vous utilisez le g des éléments ici. Pourquoi ne pas utiliser les cercles directement à ajouter les classes de première, etc? Comme c'est cette approche implique un groupe par élément un peu élimine le point de l'ensemble des groupes, ainsi, n'aurait-il pas? Il y a probablement une référence implicite à une meilleure pratique ici, mais je ne peux pas le voir. Pourriez-vous commenter s'il vous plaît?
    Vous avez raison, il n'y a aucun besoin pour les groupes dans cet exemple spécifique, vous pouvez utiliser seulement les cercles.
    merci beaucoup pour ces réponses rapides!

    OriginalL'auteur Lars Kotthoff