private renderXAxis()

in src/visual.ts [1020:1102]


    private renderXAxis(data: ChartData, duration: number): void {
        let axisNodeSelection: Selection<any>,
            axisNodeUpdateSelection: Selection<any>,
            axisBoxUpdateSelection: Selection<any>,
            color: string = data.settings.xAxis.color,
            fontColor: string = data.settings.xAxis.fontColor;

        axisNodeSelection = this.chart
            .select(Visual.LineNode.selectorName)
            .selectAll(Visual.XAxisNode.selectorName);

        axisNodeSelection.selectAll("*").remove();
        axisNodeUpdateSelection = axisNodeSelection.data(data.series);

        let axisNodeUpdateSelectionMerged = axisNodeUpdateSelection
            .enter()
            .insert("g", `g.${Visual.LineContainer.className}`)
            .merge(axisNodeUpdateSelection);
        axisNodeUpdateSelectionMerged.classed(Visual.XAxisNode.className, true);

        axisNodeUpdateSelectionMerged
            .each(function (series: Series) {
                d3Select(this).call(series.xAxisProperties.axis);
            });
        axisBoxUpdateSelection = axisNodeUpdateSelectionMerged
            .selectAll(".tick")
            .selectAll(".axisBox")
            .data([[]]);

        let axisBoxUpdateSelectionMerged = axisBoxUpdateSelection
            .enter()
            .insert("rect", "text")
            .merge(axisBoxUpdateSelection);

        axisBoxUpdateSelectionMerged
            .style("display", this.data.settings.xAxis.position === XAxisPosition.Center ? "inherit" : "none")
            .style("fill", this.data.settings.xAxis.backgroundColor);
        let tickRectY = this.data.settings.xAxis.position === XAxisPosition.Center ? -11 : 0;
        axisBoxUpdateSelectionMerged.attr("x", -(this.data.widthOfXAxisLabel / 2))
            .attr("y", tickRectY + "px")
            .attr("width", this.data.widthOfXAxisLabel)
            .attr("height", Visual.XAxisTickHeight + "px");

        axisBoxUpdateSelectionMerged
            .exit()
            .remove();

        axisNodeUpdateSelectionMerged
            .style("stroke", this.data.settings.xAxis.position === XAxisPosition.Center ? color : "none")
            .style("display", this.data.settings.xAxis.show ? "inherit" : "none");

        axisNodeUpdateSelectionMerged.call(selection => {
            let rotate = selection.datum().xAxisProperties.rotate;
            let rotateCoeff = rotate ? Math.abs(Math.sin(Visual.AxisTickRotateAngle * Math.PI / 180)) : 0;
            let dy = tickRectY + 3;
            selection.selectAll("text")
                .attr("transform", function (element: SVGTextElement): string {
                    let node = <SVGTextElement>this;
                    return `translate(0, ${(dy + 9 + node.getBoundingClientRect().width * rotateCoeff)}) rotate(${rotate ? Visual.AxisTickRotateAngle : 0})`;
                })
                .style("fill", fontColor)
                .style("stroke", "none")
                .attr("dy", -9);
        });

        axisNodeUpdateSelectionMerged.selectAll(".domain")
            .each(function () {
                let node = <Node>this;
                node.parentNode.insertBefore(node, node.parentNode.firstChild);
            })
            .style("stroke", color);

        let xAxisTop: number = this.size.height;
        switch (this.data.settings.xAxis.position) {
            case XAxisPosition.Center:
                xAxisTop = xAxisTop / 2;
                break;
            case XAxisPosition.Bottom:
                break;
        }

        axisNodeUpdateSelectionMerged.attr("transform", manipulation.translate(0, xAxisTop));
    }