javascript - How to update bound data in d3.js? -

i want update network graph dynamically in d3.js. code is:

var color = d3.scale.category20(); var my_nodes = [{"cluster": 0, "x": 50,  "y": 50},                 {"cluster": 0, "x": 100, "y": 50},                 {"cluster": 1, "x": 100, "y":100}]; var vis = d3.select("body").append("svg").attr("width", 500).attr("height", 500); var nodes = vis.selectall("circle.node").data(my_nodes).enter().append("g")                .attr("class", "node"); var circles = nodes.append("svg:circle")                    .attr("cx", function(d) { return d.x; })                    .attr("cy", function(d) { return d.y; })                    .attr("r", 5)                    .style("fill", function(d) {return color(d.cluster)}); 

this code works. when update data like:

var new_nodes = [{"cluster": 0, "x": 50,  "y": 50},                  {"cluster": 2, "x": 100, "y": 50},                  {"cluster": 2, "x": 100, "y":100}]; nodes.data(new_nodes); 

doesn't work.

how can update bound data?

edit: want replacing old data my_nodes new data new_nodes. there way update attribute cluster of each bound data?

edit2: suppose do:

d3.select("body").select("svg").selectall("circle").data(mydata).enter().append("svg:circle");

can modify mydata?

there's no data-binding magic à la angular that's going trigger "redraw". call .data , re-set attributes:

function update(){  nodes   .attr("cx", function(d) {     return d.x;   })   .attr("cy", function(d) {     return d.y;   })   .attr("r", 5)   .style("fill", function(d) {     return color(d.cluster)   }); }  var nodes = vis.selectall("circle.node").data(my_nodes)   .enter()   .append("g")   .attr("class", "node")   .append("svg:circle"); update();  // time later  nodes.data(new_nodes); update(); 

example here.