| license: mit |
This is a demonstration of a simple use of transition chaining using d3.js v7.
The circle moves from left to right then increases in radius and then changes colour from blue to red.
This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <!-- load the d3.js library --> | |
| <script src="https://d3js.org/d3.v7.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 circle to the svg | |
| .style("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 | |
| // 1st transition | |
| .transition() // apply a transition | |
| .duration(4000) // apply it over 4000 milliseconds | |
| .attr('cx', 920) // new horizontal position at 920 on x axis | |
| // 2nd transition | |
| .transition() // apply a transition | |
| .duration(4000) // apply it over 4000 milliseconds | |
| .attr('r', 40) // new radius of 40 pixels | |
| // 3rd transition | |
| .transition() // apply a transition | |
| .duration(4000) // apply it over 4000 milliseconds | |
| .style('fill', "red"); // new colour red | |
| </script> | |
| </body> |