Transition sur les positions des nœuds et des liens dans la disposition de la force D3 v4

Question

J'utilise D3 v4 pour faire une visualisation de réseau social dynamique et un exemple est ici: https://jsfiddle.net/wand5r6L/1/.

Il y a deux années de données dans cet exemple, et je veux mettre à jour les nœuds et les liens quand 2004 arrivera en 2005. Je veux changer dynamiquement les positions des nœuds et des liens quand de nouveaux nœuds et liens sont ajoutés, mais ils sortent juste à la fois indépendamment de la position originale des anciens noeuds et liens.

Je pense que je devrais ajouter transition() à la fonction tick() mais cela ne fonctionne pas et provoque plus de bogues.

Des suggestions? Merci d'avance.

Answer 1

C'est la modification d'un exemple de bloc de mise en vigueur de Mike Bostock:

https://bl.ocks.org/mbostock/0adcc447925ffae87975a3a81628a196

Ceci est une mise à jour jsFiddle je fourchue de celui que vous avez fait. La plupart du temps je spécifié une fonction clé dans les liaisons de données:

https://jsfiddle.net/eonny83k/1/

var node = g2 
    .attr("class", "nodes") 
    .selectAll("circle") 
    .data(nodeData, function(d) { return d.source + '-' + d.target });