have visit add , remove nodes in d3js don't solve problem.
there nodes @ first time, want add nodes dynamically , want if node exists update nodes , don't duplicate.
now making duplicate not updating existing ones.
here main code , full code , working fiddle 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 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 node's id unique.
you can see : jsfiddle.net/mohsenmhs/5r62n/
Comments
Post a Comment