private getInterpolation()

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);
        };
    }