javascript - How to remove existing nodes in d3.js - Stack Overflow

admin管理员组

文章数量:1391804

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);

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);

• javascript
• d3.js
• visualization
• data-visualization

Share Improve this question Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked Jul 15, 2013 at 8:01 Sohail AhmadSohail Ahmad 25622 silver badges1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

try it:

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

that the node's Id is unique.

you can see : jsfiddle/MoHSenMHS/5r62N/

Your problem is not the update nodes process, but the data you are updating them to.

When restart() runs, it doesn't remove any nodes from the data, it just adds them. Since the data is never taken away, nodes are never taken away. Each time the function is called, a new data node is added, and a new circle is added corresponding to that data node.

I've updated your example here to show this behavior. Each time I change the data, I remove an entry from your data, and replace it with a new data point.

本文标签： javascriptHow to remove existing nodes in d3jsStack Overflow