Implementing the transition the usual way, using transition.attr.
Click the circle to restart
Last active
March 31, 2017 00:09
-
-
Save robinhouston/75e847a7f0c5a123f101ea5225edc75a to your computer and use it in GitHub Desktop.
Using transition.attr as usual
This file contains 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> | |
| <title>D3 circle transitions</title> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style> | |
| html, body, svg { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| circle { | |
| fill: red; | |
| stroke: black; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg><circle cx="30" cy="20" r="5"/></svg> | |
| <script> | |
| var w = window.innerWidth, | |
| h = window.innerHeight, | |
| circle = d3.select("circle"); | |
| function clamp(val, min, max) { | |
| return Math.min(max, Math.max(min, val)); | |
| } | |
| function x(d) { return clamp(d.x, d.r + 1, w - d.r - 1); } | |
| function y(d) { return clamp(d.y, d.r + 1, h - d.r - 1); } | |
| function r(d) { return d.r; } | |
| circle.datum({ x: 10, y: 10, r: 80 }) | |
| .transition().duration(3000) | |
| .attr("cx", x) | |
| .attr("cy", y) | |
| .attr("r", r); | |
| circle.node().onclick = function() { window.location.href = ""; }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment