Skip to content

Instantly share code, notes, and snippets.

@mbostock
Forked from mbostock/.block
Last active January 26, 2022 14:32
  • Star 18 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Spline Transition
license: gpl-3.0

This example is the third of three in the Path Transitions tutorial; see the previous example for context.

When transitioning a transform on a path using basis interpolation, you must clip the path by two additional control points so that the change in tangent is not visible while the path slides left.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var n = 40,
random = d3.randomNormal(0, .2),
data = d3.range(n).map(random);
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 20, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleLinear()
.domain([1, n - 2])
.range([0, width]);
var y = d3.scaleLinear()
.domain([-1, 1])
.range([height, 0]);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
g.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + y(0) + ")")
.call(d3.axisBottom(x));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y));
g.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.datum(data)
.attr("class", "line")
.transition()
.duration(500)
.ease(d3.easeLinear)
.on("start", tick);
function tick() {
// Push a new data point onto the back.
data.push(random());
// Redraw the line.
d3.select(this)
.attr("d", line)
.attr("transform", null);
// Slide it to the left.
d3.active(this)
.attr("transform", "translate(" + x(0) + ",0)")
.transition()
.on("start", tick);
// Pop the old data point off the front.
data.shift();
}
</script>
@praveenuics
Copy link

praveenuics commented Jun 29, 2017

Is this code available in v3 at all?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment