Come rimuovere i nodi esistenti in d3.js

Question

Ho già visitato add and remove nodes in D3js ma non risolve il mio problema.

Ci sono alcuni nodi per la prima volta, quindi voglio aggiungere nodi dinamicamente e voglio se il nodo è già esistente, aggiorna i nodi e non duplica.

ora sta facendo il duplicato non aggiornando quelli esistenti.
Ecco codice principale e il codice completo e violino di lavoro è here

//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

il problema non è il processo nodi di aggiornamento, ma i dati si sta aggiornando loro.

Quando restart() viene eseguito, non rimuove alcun nodo dai dati, ma solo li aggiunge. Poiché i dati non vengono mai portati via, i nodi non vengono mai portati via. Ogni volta che viene chiamata la funzione, viene aggiunto un nuovo nodo di dati e viene aggiunta una nuova cerchia corrispondente a quel nodo di dati.

Ho aggiornato l'esempio here per mostrare questo comportamento. Ogni volta che cambio i dati, rimuovo una voce dai dati e la sostituisco con un nuovo punto dati.

Answer 2

provarlo:

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

che Id del nodo è unico.

è possibile vedere: jsfiddle.net/MoHSenMHS/5r62N/