Comment supprimer les nœuds existants dans d3.js

Question

J'ai déjà visité ajouter et supprimer des nœuds dans D3js mais ça ne résout pas mon problème.

Il y a quelques noeuds au début, puis je veux ajouter des noeuds dynamiquement et je veux que si un noeud existe déjà, il soit mis à jour et qu'il ne soit pas dupliqué.

maintenant il crée des doublons et ne met pas à jour ceux qui existent.
Voici le code principal, le code complet et le code de fonctionnement. aquí

//handles node elements
var circles = svg.selectAll('g');

//update graph (called when needed)
function restart() {

/***************************************
    Draw circles (nodes)
****************************************/

circles = circles.data(data.nodes);

var g = circles.enter()
               .append("g")
               .attr("class", "gNode")
               .attr("cursor", "pointer")
               .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
               .call(force.drag);

g.append("circle")                      
.attr({
     "class": "node", 
     "cx": function(d) { return rScale(d.NumOccurrences); },
     "cy": function(d) { return rScale(d.NumOccurrences); },
     "r": function(d) { return rScale(d.NumOccurrences); }
 })             
 .style("fill", function(d, i) { return colors(i); })
 .style("stroke", "#000");

 g.append("text")
.attr({
    "x": function(d) { return rScale(d.NumOccurrences); },
    "y": function(d) { return rScale(d.NumOccurrences); },
    "font-family": "sans-serif",
    "font-size": "20px",
    "fill": "black",
    "text-anchor": "middle"
   })
   .text( function (d) { return d.name; });

   g.append("title")        
    .text(function(d) { return d.name; });

 // remove old nodes
 circles.exit().remove();

 // set the graph in motion
 force.start();
 }

// app starts here
restart();

 function dynamicAddNodes() {

var updatedata = {"name":"ios","NumOccurrences":"500","color":"green","x":0,"y":1}

data.nodes.push(updatedata);    

restart();
 }

 setInterval(dynamicAddNodes, 10000);

Answer 1

Essayez-le :

circles = circles.data(data.nodes,function (d) {
     return d.id;
   });

que l'Id du noeud est unique.

vous pouvez voir : jsfiddle.net/MoHSenMHS/5r62N/

Answer 2

Votre problème n'est pas le processus de mise à jour des nœuds, mais les données sur lesquelles vous les mettez à jour.

En restart() s'exécute, il ne supprime aucun nœud des données, il ne fait que les ajouter. Comme les données ne sont jamais retirées, les nœuds ne sont jamais retirés. Chaque fois que la fonction est appelée, un nouveau nœud de données est ajouté, et un nouveau cercle est ajouté correspondant à ce nœud de données.

J'ai mis à jour votre exemple aquí pour montrer ce comportement. Chaque fois que je modifie les données, je supprime une entrée de vos données et la remplace par un nouveau point de données.