如何删除d3.js中的现有节点

Question

我已经访问过D3js中添加和删除节点,但它没有解决我的问题.

第一次有一些节点,然后我想动态添加节点,并且想要节点已经存在它更新节点并且不重复.

现在它正在复制不更新现有的复制品.
这里是主要代码和完整代码,工作小提琴就在这里

//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()，它不会从数据中删除任何节点，而只是添加它们。由于数据永远不会被删除，因此节点也永远不会被删除。每次调用该函数时，都会添加一个新的数据节点，并且会添加与该数据节点对应的新圆。

我在这里更新了您的示例以展示此行为。每次更改数据时，我都会从数据中删除一个条目，并将其替换为新的数据点。