Jak usunąć istniejące węzły w d3.js

Question

Odwiedziłem już add and remove nodes in D3js, ale to nie rozwiązuje mojego problemu.

Jest kilka węzłów za pierwszym razem, następnie chcę dynamicznie dodawać węzły i chcieć, aby węzeł już istniał, zaktualizował węzły i nie wykonał duplikacji.

teraz robi duplikat, nie aktualizując istniejących.
Oto główny kod i pełny kod i skrzypce pracy jest 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

Twój problem nie jest proces aktualizacji węzły, ale dane aktualizujesz im.

Po uruchomieniu restart() nie usuwa żadnych węzłów z danych, tylko dodaje je. Ponieważ dane nigdy nie są odbierane, węzły nigdy nie są odbierane. Za każdym razem, gdy funkcja jest wywoływana, dodawany jest nowy węzeł danych i dodawany jest nowy okrąg odpowiadający temu węzłowi danych.

Zaktualizowałem twój przykład here, aby pokazać to zachowanie. Za każdym razem, gdy zmieniam dane, usuwam wpis z danych i zastępuję go nowym punktem danych.

Answer 2

spróbować:

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

że węzeł identyfikatora jest wyjątkowy.

możesz zobaczyć: jsfiddle.net/MoHSenMHS/5r62N/