javascript - D3, remove the .enter created div "bubble.selectAll("circle").remove();" -
javascript - D3, remove the .enter created div "bubble.selectAll("circle").remove();" -
i new d3js, , learning own,
what planing is, create circle , erase after creation, , after 800 ms, create 1 time again wise goes.
i need know, doing wrong here.
<html> <head> <script src="http://d3js.org/d3.v3.min.js"></script> <meta charset=utf-8 /> <title>js bin</title> </head> <body> <script> var bubble = d3.select("body") .append("svg") .attr("width", '400px') .attr('height', '400px') .selectall(".circle"); //animat(); function animat(){ bubble.data([1,2,3,4,5]) .enter() .append("circle") .attr("cx", function(d,i) { homecoming d*10*(i+1); }) .attr("cy", function(d,i) { homecoming d*10*(i+1); }) .attr("r", function(d,i) { homecoming (i+1)*d*5; }) .attr("fill", 'rgba(200,200,300,0.4)'); d3.select("body") .append("svg") .attr("width", '400px') .attr('height', '400px'); bubble.selectall("circle").remove(); // want erase whole svg content , next run create 1 time again, wrong ? } setinterval(animat, 1800); </script> </body> </html> what wrong here
bubble.selectall("circle").remove(); demo here
i think problem in bubble-variable, utilize
.selectall(".circle") in origin refers class, , later
.selectall("circle") to select circles. , calling
bubble.selectall("circles").remove() you double it, reads internally
d3.select("body").selectall(".circle").selectall("circle").remove() try following:
var bubble = d3.select("body") .append("svg") .attr("width", '400px') .attr('height', '400px'); bubble.selectall("circle").data([1,2,3,4,5]) .enter() .append("circle") .attr("cx", function(d,i) { homecoming d*10*(i+1); }) .attr("cy", function(d,i) { homecoming d*10*(i+1); }) .attr("r", function(d,i) { homecoming (i+1)*d*5; }) .attr("fill", 'rgba(200,200,300,0.4)'); } and remove use
bubble.selectall("circle").remove(); however, code @ moment, circle gets removed instantly after drawing, won't see anything. set remove-line @ top of function:
function animat(){ bubble.selectall("circle").remove(); that clears circles , draws new ones, won't see alter there no delay.
i imagine want have sort of visual effect deleting circle, (again, right @ top of function):
bubble.selectall("circle").transition().duration(1000).remove(); demo: http://jsbin.com/jigelipi/5/edit
edit: create little smoother: bubble.selectall("circle").transition().duration(500).attr("fill",'rgba(200,200,300,0)').remove();
demo: http://jsbin.com/jigelipi/10/edit
javascript d3.js
Comments
Post a Comment