| license: gpl-3.0 |
This example demonstrates how to transition back to a default style value after setting an inline style. Inside transition.style, temporarily remove the style to retrieve its default value; then restore the style before starting the transition.
In a future version of D3 (see related issue), transition.style(name, null) will probably do this for you automatically, rather than its current behavior of immediately removing the specified style at the start of the transition.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| circle { | |
| fill: #333; | |
| } | |
| </style> | |
| <svg width="960" height="500"> | |
| <circle cx="480" cy="250" r="200"/> | |
| </svg> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| setInterval(function() { | |
| d3.select("circle") | |
| .style("fill", d3.hcl(Math.random() * 360, 100, 50)) | |
| .transition() | |
| .duration(2000) | |
| .style("fill", function() { | |
| var that = d3.select(this), | |
| fill0 = that.style("fill"), | |
| fill1 = that.style("fill", null).style("fill"); | |
| that.style("fill", fill0); | |
| return fill1; | |
| }); | |
| }, 2500); | |
| </script> |
