in src/visual.ts [1378:1437]
private getInterpolation(data: DataPoint[], start: number): any {
if (!this.data) {
return;
}
let xScale: LinearScale = <LinearScale>this.data.xScale,
yScales: LinearScale[] = <LinearScale[]>this.data.yScales;
let stop: number = start + 1;
this.showAnimationDot();
let lineFunction: Line = d3Line<DataPoint>()
.x((d: DataPoint) => d.x)
.y((d: DataPoint) => d.y)
.curve(curveLinear);
let interpolatedLine = data.slice(0, start + 1).map((d: DataPoint): PointXY => {
return {
x: xScale(d.x),
y: yScales[d.groupIndex](d.y)
};
});
let x0: number = xScale(data[start].x);
let x1: number = xScale(data[stop].x);
let y0: number = yScales[data[start].groupIndex](data[start].y);
let y1: number = yScales[data[stop].groupIndex](data[stop].y);
let interpolateIndex: LinearScale = scaleLinear()
.domain([0, 1])
.range([start, stop]);
let interpolateX: LinearScale = scaleLinear()
.domain([0, 1])
.range([x0, x1]);
let interpolateY: LinearScale = scaleLinear()
.domain([0, 1])
.range([y0, y1]);
this.animationHandler.setRunnerCounterValue(start);
return (t: number) => {
if (!this.animationHandler.isPlaying) {
return lineFunction(<DataPoint[]>interpolatedLine);
}
let x: number = interpolateX(t);
let y: number = interpolateY(t);
this.animationDot
.attr("cx", x)
.attr("cy", y);
interpolatedLine.push({ "x": x, "y": y });
this.animationHandler.position.index = interpolateIndex(t);
return lineFunction(<DataPoint[]>interpolatedLine);
};
}