Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove existing nodes in d3.js


I have already visit add and remove nodes in D3js but it don't solve my problem.

There are some nodes at first time, then I want to add nodes dynamically and want if node is already exists it update that nodes and don't do duplicate.

now it is making duplicate not updating existing ones.
Here is main code and full code and working fiddle is 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);
like image 404
Sohail Ahmad Avatar asked Jul 15 '13 08:07

Sohail Ahmad


1 Answers

try it:

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

that the node's Id is unique.

you can see : jsfiddle.net/MoHSenMHS/5r62N/

like image 147
MHS Avatar answered Sep 19 '22 16:09

MHS