private drawClipPath()

in src/visual.ts [897:934]


    private drawClipPath(linePathSelection: d3.Selection<d3.BaseType, any, any, any>) {
        const clipPath: d3.Selection<d3.BaseType, any, any, any> = linePathSelection
            .selectAll("clipPath")
            .data(d => [d]);

        const clipPathMerged = clipPath
            .enter()
            .append("clipPath")
            .merge(clipPath);

        clipPathMerged
            .attr("id", LineDotChart.lineClip)
            .append("rect")
            .attr("x", LineDotChart.zeroX)
            .attr("y", LineDotChart.zeroY)
            .attr("height", this.layout.viewportIn.height);

        const line_left: any = this.xAxisProperties.scale(_.first(this.data.dotPoints).dateValue.value);
        const line_right: any = this.xAxisProperties.scale(_.last(this.data.dotPoints).dateValue.value);

        const rectSettings: LineAnimationSettings = this.getRectAnimationSettings(line_left, line_right);

        if (this.settings.misc.isAnimated) {
            clipPathMerged
                .selectAll("rect")
                .attr("x", rectSettings.startX)
                .attr("width", 0)
                .attr("height", this.layout.viewportIn.height)
                .interrupt()
                .transition()
                .ease(d3.easeLinear)
                .duration(this.animationDuration * LineDotChart.millisecondsInOneSecond)
                .attr("x", rectSettings.endX)
                .attr("width", rectSettings.endWidth);
        } else {
            linePathSelection.selectAll("clipPath").remove();
        }
    }