Skip to content

Instantly share code, notes, and snippets.

Forked from tandu/index.html
Last active February 9, 2016 01:23
Show Gist options
  • Save mbostock/2983699 to your computer and use it in GitHub Desktop.
Save mbostock/2983699 to your computer and use it in GitHub Desktop.
Manual Axis Interpolation
license: gpl-3.0

D3's axis component supports automatic interpolation; simply change the scale, create a transition, and call the axis. The axis component will automatically create a smooth transition.

However, it's also possible to create a custom tween and redraw the axis synchronously for each frame of the transition. If you wanted to display intermediate ticks for a long-running transition, this might be preferred to the default behavior. This example shows a slow zoom from three years to one day.

<!DOCTYPE html>
<meta charset="utf-8">
.axis text {
font: 10px sans-serif;
.axis path,
.axis line {
fill: none;
stroke: #000;
<script src="//"></script>
var width = 960,
height = 500;
var domain0 = [+new Date(2000, 0, 1), +new Date(2003, 0, 1)],
domain1 = [+new Date(2000, 1, 1), +new Date(2000, 1, 2)];
var x = d3.time.scale.utc()
.range([0, width]);
var xAxis = d3.svg.axis()
var svg ="body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("transform", "translate(0,200)");
var gAxis = svg.append("g")
.attr("class", "x axis")
setInterval(transition, 10000);
function transition() {
gAxis.transition().duration(8500).tween("axis", function(d, i) {
var i = d3.interpolate(domain0, domain1);
return function(t) {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment