如何刪除d3.js中的現有節點

Question

我已經訪問add and remove nodes in D3js但它不能解決我的問題。

有一些節點在第一時間，然後我想要動態添加節點，並希望如果節點已經存在，它會更新節點，並且不會重複。

現在它正在複製而不更新現有的。
這是主要的代碼和完整的代碼和工作小提琴是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

您的問題沒有更新節點的過程，但數據正在更新他們。

當restart()運行時，它不會從數據中刪除任何節點，它只是添加它們。由於數據永遠不會被帶走，節點永遠不會被帶走。每次調用該函數時，都會添加一個新的數據節點，併爲該數據節點添加一個新的圓。

我已更新您的示例here以顯示此行爲。每次更改數據時，我都會從數據中刪除條目，並將其替換爲新的數據點。

Answer 2

嘗試：

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

該節點的ID是唯一的。

你可以看到：jsfiddle.net/MoHSenMHS/5r62N/