A demo of how to avoid reselecting nodes during their exit transitions, solving the issue I had at d3/d3#1143
The technique is to add an 'exiting' class to exiting nodes and avoid them with our selectAll call.
Last active
December 14, 2015 22:39
-
-
Save gunn/5159908 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
| <title>OMG Circles!</title> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.25.0"></script> | |
| <style type="text/css"> | |
| body { | |
| background: #222; | |
| } | |
| circle { | |
| fill: none; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var MAX_ITEMS = 6 | |
| var values = [] | |
| var w = 960, | |
| h = 500, | |
| z = d3.scale.category20c(), | |
| i = 0; | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h) | |
| .style("pointer-events", "all") | |
| nextFrame = function() { | |
| values.push([Math.random(), Math.random()]); | |
| if (values.length > MAX_ITEMS) { | |
| values.shift(); | |
| } | |
| // Don't reselct circles that are doing their exit transitions. | |
| var circles = svg.selectAll("circle:not(.exiting)") | |
| .data(values, function(d){ return d[0] }) | |
| circles.enter() | |
| .append("circle") | |
| .attr("cx", function(t){ return t[0]*w }) | |
| .attr("cy", function(t){ return t[1]*h }) | |
| .attr("r", 1e-6) | |
| .style("stroke", z(++i)) | |
| .style("stroke-opacity", 1) | |
| .transition() | |
| .duration(1000) | |
| .ease(Math.sqrt) | |
| .attr("r", 30); | |
| circles.exit() | |
| // give circles an 'exiting' class so we don't reselect them. | |
| .attr("class", "exiting") | |
| .transition() | |
| .duration(1000) | |
| .attr("r", 100) | |
| .style("stroke-opacity", 0) | |
| .remove(); | |
| } | |
| setInterval(nextFrame, 400); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment