So entfernen Sie vorhandene Knoten in d3.js

Question

Ich habe bereits add and remove nodes in D3js besuchen, aber es löst nicht mein Problem.

Es gibt einige Knoten zum ersten Mal, dann möchte ich Knoten dynamisch hinzufügen und will, wenn Knoten bereits existiert, aktualisieren Sie diese Knoten und nicht doppelt.

Jetzt macht es Duplikate nicht bestehende aktualisieren.
ist hier Hauptcode und vollständige Code und Geige Arbeit ist 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

Ihr Problem ist nicht die Update-Knoten Prozess, aber die Daten, die Sie aktualisieren, um sie zu.

Wenn restart() ausgeführt wird, entfernt es keine Knoten aus den Daten, sondern fügt sie einfach hinzu. Da die Daten niemals entfernt werden, werden Knoten niemals entfernt. Jedes Mal, wenn die Funktion aufgerufen wird, wird ein neuer Datenknoten hinzugefügt, und ein neuer Kreis wird entsprechend diesem Datenknoten hinzugefügt.

Ich habe Ihr Beispiel here aktualisiert, um dieses Verhalten zu zeigen. Jedes Mal, wenn ich die Daten ändere, entferne ich einen Eintrag aus Ihren Daten und ersetze ihn durch einen neuen Datenpunkt.

Answer 2

versuchen es:

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

dass der Knoten des Id eindeutig ist.

Sie können sehen: jsfiddle.net/MoHSenMHS/5r62N/