Skip to content

Instantly share code, notes, and snippets.

@tandu

tandu/index.html

Created June 24, 2012 09:52
Show Gist options
  • Save tandu/2982665 to your computer and use it in GitHub Desktop.
Save tandu/2982665 to your computer and use it in GitHub Desktop.
Download ZIP
d3 transition step bug
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body style="margin:0">
<p>This examples shows bug in ticks positioning if using step method for animation.</br>
Click timeline to animate. On animation end ticks are incorrectly positioned.</p>
<div id="timeline"></div>
<script>
var w = $('#timeline').width(),
startX, endX,
svg = d3.select('#timeline').append('svg')
.attr('class', 'timeline')
.attr('width', w)
.attr('height', 100),
x = d3.time.scale.utc()
.domain([new Date(2000, 0, 1), new Date(2003, 0, 1)])
.range([0, w]),
xAxis = d3.svg.axis().scale(x).tickSize(-20);
svg.insert('rect').attr('width', w).attr('height', 100).attr('fill', '#ffccdd')
var holder = svg.append('g').attr('class', 'axis');
holder.call(xAxis);
svg.on('click', function() {
startX = x.copy();
endX = x.copy().domain([new Date(2000, 1, 1), new Date(2001, 1, 1)]);
holder.transition().duration(700).tween('step', stepRedraw);
});
function stepRedraw(d, i) {
return function(t) {
x.domain(d3.interpolateArray(startX.domain(), endX.domain())(t));
holder.call(xAxis);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment