This is a demonstration of a simple use of a transition using d3.js v4.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.
Created
December 27, 2016 19:18
-
-
Save d3noob/c3cbb8af554eb848d09ab97306bb5583 to your computer and use it in GitHub Desktop.
Simple transition in v4
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> | |
| <meta charset="utf-8"> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var svg = d3.select("body") // Select the body element | |
| .append("svg") // Append an SVG element to the body | |
| .attr("width", 960) // make it 960 pixels wide | |
| .attr("height", 500) // make it 500 pixels high | |
| .append("circle") // append a cicle to the svg | |
| .attr("fill", "blue") // fill the circle with 'blue' | |
| .attr("r", 20) // set the radius to 10 pixels | |
| .attr('cx', 40) // position the circle at 40 on the x axis | |
| .attr('cy', 250) // position the circle at 250 on the y axis | |
| .transition() // apply a transition | |
| .duration(4000) // apply it over 4000 milliseconds | |
| .attr('cx', 920); // new horizontal position at 920 on x axis | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment