Animate Chart Axis Transitions in D3 v4
When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart.
[00:01] Now we have our nice animated column chart that will slide out items that no longer are present, update existing items, and then slide in any new items. All of this is built with the assumption that all of our data is going to fall within the domain of 0to 100 on the Y scale.
[00:23] Sometimes that's a safe assumption, and other times it's not, so let's look at how we can handle data with a variable domain. To do this, we're first going to update our data. We'll say that David somehow managed to score 144 on his math test, he's super good at math.
[00:41] We're also going to bump Emily's science score down to 55, just so that our science scores all are pretty low, so we're going to update it accordingly to the data. The first thing that we need to do is get a reference to the Y axis that we're already creating.
[01:00] I'm going to say var Y axis = and then we can use our existing code here that creates the axis. The next thing we'll do is we'll come down here, and we'll put this after the exit and removeAnimation, because we want the items to slide out, and then we want to update our axis at the same time that we're updating our columns.
[01:22] What we're going to do here is say yscale.domain, so we're just sort of going to reassign the domain, or update the domain of our existing scale. We're going to still assume that it starts at 0but to find the maximum, we're going to say d3.max which is a utility function that D3 provides.
[01:42] We're going to pass in our data, and then for our accessor function here, we're going to say d.subject, or [subject] like we've done before. That's the same thing we're doing here to get our data, in this case we're telling d3.max to use whatever field is specified by the current subject.
[02:07] Now that we have updated the domain itself, we need to actually animate our axis update. We're going to say Y axis, which is the reference we just created to our existing axis, and then we're going to use transition and pass in T again, just the same way that we're doing here when we update our columns.
[02:28] We're also going to mimic the same delay since we want this to happen after items have slid out. Then we're essentially going to copy this call that we have here, so this selection.call method is going to get copied from there, and brought down here, because this essentially says take the scale and apply it to our axis.
[02:54] We're just going to redo that, and we've got the transition already applied. Now, if we save this, we see that our scale updates. If we go to science, and remember science is where we gave everybody a pretty low score, you can see now our axis maximum is above 140.
[03:15] If we go to science we get the slide out, now everything updates including the axis, and our axis maximum is 62 which matches the maximum science score. If we go to language, were going to get it back updated to, let's see, 85 is the maximum language score.
[03:35] Now we can go back to math, and everything updates to handle that large outlier there as well. That's all you need to do to handle a dynamic access range and update those values as well.
[03:49] You need to store a reference to your axis, and then when your data updates, you need to calculate a new domain for the data, or based on the data, and then simply update your existing axis by calling the call method again, but applying a transition.