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/