Spline Transition

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.

forked from mbostock's block: Spline Transition

<!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>

https://d3js.org/d3.v4.min.js