private drawPlaybackButtons()

in src/visual.ts [725:847]
95 lines of code
6 McCabe index (conditional complexity)

    private drawPlaybackButtons() {
        const playBtn: d3.Selection<d3.BaseType, string, any, any> = this.line
            .selectAll(LineDotChart.gLineDotChartPayBtn)
            .data([""]);

        const playBtnGroup: d3.Selection<d3.BaseType, string, any, any> = playBtn
            .enter()
            .append("g")
            .merge(playBtn);

        playBtnGroup
            .attr("transform", "translate(40, 20)")
            .classed(LineDotChart.lineDotChartPlayBtn, true);

        playBtnGroup.style("opacity", this.settings.play.opacity);

        const circleSelection: d3.Selection<d3.BaseType, any, any, any> = playBtnGroup
            .selectAll("circle")
            .data(d => [d]);

        const circleSelectionMegred = circleSelection
            .enter()
            .append("circle")
            .merge(circleSelection);

        circleSelectionMegred
            .attr("r", LineDotChart.playBtnGroupDiameter / 2)
            .on("click", () => this.setIsStopped(!this.settings.misc.isStopped));

        circleSelectionMegred.style("fill", this.settings.play.fill)
            .style("stroke", this.settings.play.stroke)
            .style("stroke-width", PixelConverter.toString(this.settings.play.strokeWidth))
            .style("opacity", this.settings.play.opacity);

        circleSelection
            .exit()
            .remove();

        const firstPathSelection: d3.Selection<d3.BaseType, any, any, any> = playBtnGroup
            .selectAll(this.firstPathSelector.selectorName)
            .data(d => [d]);

        const firstPathSelectionMerged = firstPathSelection
            .enter()
            .append("path")
            .merge(firstPathSelection);

        firstPathSelectionMerged
            .classed("play", true)
            .attr("d", LineDotChart.playBtnGroupLineValues)
            .attr("transform", "translate(-4, -8)")
            .style("pointer-events", "none");

        firstPathSelectionMerged.style("fill", this.settings.play.innerColor);

        firstPathSelection
            .exit()
            .remove();

        const secondPathSelection: d3.Selection<d3.BaseType, any, any, any> = playBtnGroup
            .selectAll(this.secondPathSelector.selectorName)
            .data(d => [d]);

        const secondPathSelectionMerged = secondPathSelection
            .enter()
            .append("path")
            .merge(secondPathSelection);

        secondPathSelectionMerged
            .classed(LineDotChart.StopButton.className, true)
            .attr("d", LineDotChart.playBtnGroupLineValues)
            .attr("pointer-events", "none")
            .attr("transform", "translate(6, 8) rotate(180)");

        secondPathSelectionMerged.style("fill", this.settings.play.innerColor);

        secondPathSelection
            .exit()
            .remove();

        const rectSelection: d3.Selection<d3.BaseType, any, any, any> = playBtnGroup
            .selectAll("rect")
            .data(d => [d]);

        const rectSelectionMerged = rectSelection
            .enter()
            .append("rect")
            .merge(rectSelection);

        rectSelectionMerged
            .classed(LineDotChart.StopButton.className, true)
            .merge(rectSelection);

        rectSelectionMerged
            .attr("width", LineDotChart.playBtnGroupRectWidth)
            .attr("height", LineDotChart.playBtnGroupRectHeight)
            .attr("pointer-events", "none")
            .attr("transform", "translate(-7, -6)");

        rectSelectionMerged.style("fill", this.settings.play.innerColor);

        rectSelection
            .exit()
            .remove();

        playBtnGroup
            .selectAll("circle")
            .attr("opacity", () => this.settings.misc.isAnimated ? 1 : 0);

        playBtnGroup
            .selectAll(".play")
            .merge(playBtn)
            .attr("opacity", () => this.settings.misc.isAnimated && this.settings.misc.isStopped ? 1 : 0);

        playBtnGroup
            .selectAll(LineDotChart.StopButton.selectorName)
            .merge(playBtn)
            .attr("opacity", () => this.settings.misc.isAnimated && !this.settings.misc.isStopped ? 1 : 0);

        playBtn
            .exit()
            .remove();
    }