Cách xóa các nút hiện có trong d3.js

Question

Tôi đã truy cập add and remove nodes in D3js nhưng nó không giải quyết được sự cố của tôi.

Có một số nút ở lần đầu tiên, sau đó tôi muốn thêm nút động và muốn nếu nút đã tồn tại, cập nhật các nút đó và không sao chép.

hiện tại, tính năng này đang tạo bản sao chứ không cập nhật những cái hiện có.
Đây là mã chính và mã đầy đủ và fiddle làm việc là 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

Vấn đề của bạn không phải là quá trình cập nhật nút, nhưng dữ liệu bạn đang cập nhật tới.

Khi restart() chạy, nó không xóa bất kỳ nút nào khỏi dữ liệu, nó chỉ thêm chúng. Vì dữ liệu không bao giờ bị lấy đi, các nút sẽ không bao giờ bị lấy đi. Mỗi lần hàm được gọi, một nút dữ liệu mới được thêm vào và một vòng tròn mới được thêm tương ứng với nút dữ liệu đó.

Tôi đã cập nhật ví dụ here của bạn để hiển thị hành vi này. Mỗi khi tôi thay đổi dữ liệu, tôi xóa một mục nhập khỏi dữ liệu của bạn và thay thế nó bằng một điểm dữ liệu mới.

Answer 2

thử nó:

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

rằng Id của nút là duy nhất.

bạn có thể thấy: jsfiddle.net/MoHSenMHS/5r62N/