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);
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With