Skip to content

Instantly share code, notes, and snippets.

@slojo404
Forked from mbostock/.block
Created Apr 11, 2012
Embed
What would you like to do?
Line Transition

D3’s default path interpolation is the same as its string interpolation: it finds numbers embedded in strings, and interpolates those numbers. So, the default behavior when interpolating two paths is like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M x0, y1 L x1, y2 L x2, y3 L x3, y4 

For example, the first point ⟨x0,y0⟩ is interpolated to ⟨x0,y1⟩. Since x0 is the same, all you see are the y-values changing (see example)—you don't see the path slide to the left as intended.

What you want to happen here is something like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4
   ↓   ↓    ↓   ↓    ↓   ↓    ↓   ↓
M xL, y0 L x0, y1 L x1, y2 L x2, y3 L x3, y4 

Where xL is some negative value off the left side, and xR is some positive value off the right side. This way, the first point ⟨x0,y0⟩ is interpolated to ⟨xL,y0⟩; meaning, the x-coordinate is interpolated rather than the y-coordinate, and so the path appears to slide off to the left. Likewise, the incoming point ⟨xR,y4⟩ is interpolated to ⟨x3,y4⟩.

Alternatively, you can achieve this effect by interpolating a transform attribute rather than the path, so that the path "d" attribute remains static but the path element translates to the left during the transition. In that case, the path is redrawn like this:

M x0, y0 L x1, y1 L x2, y2 L x3, y3 L xR, y4

Then, a transform transition is applied:

translate(0)
          ↓
translate(xL)

Thus causing the path to slide to the left. A clip path is used so the path is not visible outside of the chart body.

Note that for charts with spline interpolation, you’ll need to crop the visible part of the line by an extra point, so that the change in tangent is not visible. See the spline interpolation version.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<body>
<script src="http://mbostock.github.com/d3/d3.js?2.7.2"></script>
<script>
var n = 40,
random = d3.random.normal(0, .2),
data = d3.range(n).map(random);
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, n - 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([-1, 1])
.range([height, 0]);
var line = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis().scale(x).orient("bottom"));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis().scale(y).orient("left"));
var path = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data([data])
.attr("class", "line")
.attr("d", line);
tick();
function tick() {
// push a new data point onto the back
data.push(random());
// redraw the line, and slide it to the left
path
.attr("d", line)
.attr("transform", null)
.transition()
.duration(500)
.ease("linear")
.attr("transform", "translate(" + x(-1) + ")")
.each("end", tick);
// pop the old data point off the front
data.shift();
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment