Ajout et Suppression de Nœuds dans D3js Force Graphique
Je suis de chargement json
à partir de la base de données et la création d'un json
fichier qui charge très bien. Maintenant, je ne sais pas laquelle des mesures à prendre pour faire les nœuds sensible à une Force Dirigée Graphique. J'ai besoin de supprimer et ajouter de nouveaux nœuds et de liens.
force.nodes(json.nodes)
.links(json.links)
.start();
initNodes(json);
Comment puis-je le rendre plus dynamique ou mise à jour sans réinitialiser l'ensemble de la visualisation?
J'ai vu cette question une couple de fois n'étant pas répondu donc j'espère que quelqu'un peut poster et donner un guide.
OriginalL'auteur BlitzCrank | 2012-07-23
Vous devez vous connecter pour publier un commentaire.
Ajout de nœuds/liens vers mon D3 force graphique a été très confus jusqu'à ce que j'ai de mieux comprendre la façon dont j'ai été l'ajout de la première série de nœuds.
En supposant un
<g>
est ce que vous aimeriez utiliser pour votre nœuds:Maintenant, nous allons faire de cette fonction qui va ajouter un nœud à la mise en page une fois que le graphique a été initialisé!
newNodeData
est un objet avec les données que vous souhaitez utiliser pour votre nouveau nœud.connectToMe
est une chaîne de caractères contenant l'identifiant unique d'un nœud que vous souhaitez connecter votre nouveau nœud.La fonction donnée comme deuxième argument optionnel dans
.data()
est exécuté une fois pour chaque nœud dans le choix et encore pour chaque nœud dansforce.nodes()
, ainsi que sur la base de la valeur retournée. Si aucune fonction n'est fourni, un repli de la fonction est invoquée, qui renvoie laindex
(comme ci-dessus).Toutefois, il n'est plus susceptible d'être un différend entre l'index de votre nouvelle sélection (je crois que l'ordre est aléatoire) et l'ordre dans
force.nodes()
. Au lieu de cela, vous aurez probablement besoin de la fonction de retour d'un bien qui est unique à chaque nœud.Ce temps,
.enter()
ne reviendra que le nœud que vous essayez d'ajouter quenewData
car aucune touche n'a été trouvé pour le deuxième argument de.data()
.La fonction createLink (défini ci-dessous) permet de créer un lien entre votre nouveau noeud et le noeud de choix.
En outre, le d3js API membres de cette force.start() doit être appelée après la mise à jour de la mise en page.
Remarque: Appel
force.stop()
au tout début de ma fonction a été d'une grande aide pour moi, quand j'ai d'abord été à essayer de comprendre comment ajouter des nœuds et des liens vers mon graphe.Le code ci-dessous fonctionne sous les hypothèses suivantes:
#links
est l'enveloppe de l'élément qui contient l'ensemble de vos éléments linkVos liens sont représentés comme
<line>
éléments:OriginalL'auteur Walter Roman
Vous pouvez voir un exemple de comment faire pour ajouter de nouveaux nœuds et les relations ici:
http://bl.ocks.org/2432083
Se débarrasser de nœuds et de relations est un peu plus délicat, mais vous pouvez le voir ici:
http://bl.ocks.org/1095795
L'important, c'est pour enregistrer la valeur de retour de .les données de la méthode de la var (disons x) et l'appel x.exit().remove() à la fin de la méthode.
OriginalL'auteur Elijah