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.
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.
<!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> |