A commented example of tweening arcs; see Pie Chart Update, II and Arc Tween (Clock) for older examples. (There’s also The Amazing Pie and Donut Transitions if you want to get fancy.) See the API reference for transition.attrTween and my tutorial Working with Transitions for more.
Last active
March 2, 2024 12:15
-
-
Save mbostock/5100636 to your computer and use it in GitHub Desktop.
Arc Tween
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
| license: gpl-3.0 |
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"> | |
| <svg width="960" height="500"></svg> | |
| <script src="//d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto | |
| // An arc function with all values bound except the endAngle. So, to compute an | |
| // SVG path string for a given angle, we pass an object with an endAngle | |
| // property to the `arc` function, and it will return the corresponding string. | |
| var arc = d3.arc() | |
| .innerRadius(180) | |
| .outerRadius(240) | |
| .startAngle(0); | |
| // Get the SVG container, and apply a transform such that the origin is the | |
| // center of the canvas. This way, we don’t need to position arcs individually. | |
| var svg = d3.select("svg"), | |
| width = +svg.attr("width"), | |
| height = +svg.attr("height"), | |
| g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| // Add the background arc, from 0 to 100% (tau). | |
| var background = g.append("path") | |
| .datum({endAngle: tau}) | |
| .style("fill", "#ddd") | |
| .attr("d", arc); | |
| // Add the foreground arc in orange, currently showing 12.7%. | |
| var foreground = g.append("path") | |
| .datum({endAngle: 0.127 * tau}) | |
| .style("fill", "orange") | |
| .attr("d", arc); | |
| // Every so often, start a transition to a new random angle. The attrTween | |
| // definition is encapsulated in a separate function (a closure) below. | |
| d3.interval(function() { | |
| foreground.transition() | |
| .duration(750) | |
| .attrTween("d", arcTween(Math.random() * tau)); | |
| }, 1500); | |
| // Returns a tween for a transition’s "d" attribute, transitioning any selected | |
| // arcs from their current angle to the specified new angle. | |
| function arcTween(newAngle) { | |
| // The function passed to attrTween is invoked for each selected element when | |
| // the transition starts, and for each element returns the interpolator to use | |
| // over the course of transition. This function is thus responsible for | |
| // determining the starting angle of the transition (which is pulled from the | |
| // element’s bound datum, d.endAngle), and the ending angle (simply the | |
| // newAngle argument to the enclosing function). | |
| return function(d) { | |
| // To interpolate between the two angles, we use the default d3.interpolate. | |
| // (Internally, this maps to d3.interpolateNumber, since both of the | |
| // arguments to d3.interpolate are numbers.) The returned function takes a | |
| // single argument t and returns a number between the starting angle and the | |
| // ending angle. When t = 0, it returns d.endAngle; when t = 1, it returns | |
| // newAngle; and for 0 < t < 1 it returns an angle in-between. | |
| var interpolate = d3.interpolate(d.endAngle, newAngle); | |
| // The return value of the attrTween is also a function: the function that | |
| // we want to run for each tick of the transition. Because we used | |
| // attrTween("d"), the return value of this last function will be set to the | |
| // "d" attribute at every tick. (It’s also possible to use transition.tween | |
| // to run arbitrary code for every tick, say if you want to set multiple | |
| // attributes from a single function.) The argument t ranges from 0, at the | |
| // start of the transition, to 1, at the end. | |
| return function(t) { | |
| // Calculate the current arc angle based on the transition time, t. Since | |
| // the t for the transition and the t for the interpolate both range from | |
| // 0 to 1, we can pass t directly to the interpolator. | |
| // | |
| // Note that the interpolated angle is written into the element’s bound | |
| // data object! This is important: it means that if the transition were | |
| // interrupted, the data bound to the element would still be consistent | |
| // with its appearance. Whenever we start a new arc transition, the | |
| // correct starting angle can be inferred from the data. | |
| d.endAngle = interpolate(t); | |
| // Lastly, compute the arc path given the updated data! In effect, this | |
| // transition uses data-space interpolation: the data is interpolated | |
| // (that is, the end angle) rather than the path string itself. | |
| // Interpolating the angles in polar coordinates, rather than the raw path | |
| // string, produces valid intermediate arcs during the transition. | |
| return arc(d); | |
| }; | |
| }; | |
| } | |
| </script> |
I managed to recreate that animation only with this tweak in my code:
const arc = d3
.arc()
.cornerRadius(2)
.padAngle(0)
.innerRadius(radius - (arcWidth ?? radius))
.outerRadius(radius)
svg
.select('.plot-area')
.selectAll('path')
.data(formattedData)
.join('path')
...
.transition()
.duration(3000)
.delay(0)
.attrTween('d', function (d) {
const interpolate = d3.interpolate(d.startAngle, d.endAngle)
return function (t) {
d.endAngle = interpolate(t)
return arc(d)
}
})
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I tried using this sample code, works fine if I directly refer to the element (as you are doing in line 43). But its throwing error for line 93 (arc is not defined) if refer to an element through selection. Below is the small snippet I used-
d3.select(d3.selectAll(".l2Component")[0][0]).select("path") //l2Component is a g tag which has only one path child node
.transition()
.duration(500)
.attrTween("d",function(d){
var interpolate = d3.interpolate(d, {startAngle: 0, endAngle: 72*(Math.PI/180)});
return function(t){
d=interpolate(t);
return arc(d);
};
});