Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/index.html Secret

Created January 16, 2017 16:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mbostock/e82068fbaf4f2d75549c4a480b28f643 to your computer and use it in GitHub Desktop.
Save mbostock/e82068fbaf4f2d75549c4a480b28f643 to your computer and use it in GitHub Desktop.
Download ZIP
Chained Axis Transition
Raw
index.html
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 250, right: 40, bottom: 250, left: 40},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom;
var x = d3.scaleTime()
.domain(interval(0))
.range([0, width]);
var xAxis = d3.axisBottom(x);
svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(xAxis)
.transition()
.duration(1000)
.ease(d3.easeLinear)
.on("start", animate);
function animate() {
x.domain(interval(1000));
d3.active(this)
.call(xAxis)
.transition()
.on("start", animate);
}
function interval(offset) {
var now = Date.now() + offset;
return [now - 10 * 6000, now];
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment