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

试一试：

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

节点的Id是唯一的。

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

Answer 2

您的问题不是更新节点进程，而是您要更新它们的数据。

当restart()运行时，它不会从数据中删除任何节点，只会添加它们。由于数据永远不会被带走，因此节点永远不会被带走。每次调用该函数时，都会添加一个新的数据节点，并添加一个与该数据节点对应的新圆。

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

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

2 个答案: