Built with blockbuilder.org
xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <script> data = d3.range(5) // Feel free to change or delete any of the code you see in this editor! var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) function redraw(size) { var selection = svg.selectAll(".nodes").data(data) enterSelection = selection.enter().append("g") .attr("class", "nodes") enterSelection.append("rect") .attr("height", size) .attr("width", size) .attr("x", function(d) {return 200+ d*10}) .attr("y", function(d) {return 100+ d*10}) .attr("fill", "black") enterSelection.append("circle") .attr("r", size) .attr("cx", function(d) {return 100+ d*10}) .attr("cy", function(d) {return 100+ d*10}) .attr("fill", "black") //How to update? enterSelection.merge(selection) .select("circle") .transition() .duration(1000) .delay(function(i) {return i*100}) .attr("r", size) .attr("cx", function(d) {return 100+ d*10}) .attr("cy", function(d) {return 100+ d*10}) .attr("fill", "black") } redraw(10) data = d3.range(10) redraw(20) </script></body> https://d3js.org/d3.v4.min.js