private drawAxisLabels()

in src/UXClient/Components/ScatterPlot/ScatterPlot.ts [834:904]


    private drawAxisLabels(){
        let self = this;
        let xLabelData, yLabelData;

        const truncateTextLength = (textSelection,  maxTextLengthPx: number) => {
            if(textSelection.node() && textSelection.node().getComputedTextLength) {
                var textLength = textSelection.node().getComputedTextLength();
                var text = textSelection.text();
                while ( textLength > maxTextLengthPx && text.length > 0) {
                    text = text.slice(0, -1);
                    textSelection.text(text + '...');
                    textLength = textSelection.node().getComputedTextLength();
                }
            }
        }
        
        // Associate axis label data
        (this.chartOptions.spAxisLabels != null && this.chartOptions.spAxisLabels.length >= 1) ?
          xLabelData = [this.chartOptions.spAxisLabels[0]] : xLabelData = [];

        (this.chartOptions.spAxisLabels != null && this.chartOptions.spAxisLabels.length >= 2) ?
        yLabelData = [this.chartOptions.spAxisLabels[1]] : yLabelData = [];

        this.xAxisLabel = this.pointWrapper.selectAll('.tsi-xAxisLabel').data(xLabelData);
        let xAxisLabel = this.xAxisLabel
            .enter()
            .append("text")
            .attr("class", "tsi-xAxisLabel tsi-AxisLabel")
            .merge(this.xAxisLabel)
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + (this.chartWidth / 2) + " ," + (this.chartHeight + 42) + ")")
            .text(null);
        xAxisLabel.each(function(d) {
            let label = d3.select(this);
            Utils.appendFormattedElementsFromString(label, d, {inSvg: true});
        });
        //text is either in tspans or just in text. Either truncate text directly or through tspan
        if (xAxisLabel.selectAll("tspan").size() == 0)
            truncateTextLength(xAxisLabel, this.chartWidth)
        else {
            xAxisLabel.selectAll("tspan").each(function() {
                var tspanTextSelection = d3.select(this);
                truncateTextLength(tspanTextSelection, self.chartWidth / xAxisLabel.selectAll("tspan").size());
            });
        }
        this.xAxisLabel.exit().remove();

        this.yAxisLabel = this.pointWrapper.selectAll('.tsi-yAxisLabel').data(yLabelData);
        let yAxisLabel = this.yAxisLabel
            .enter()
            .append("text")
            .attr("class", "tsi-yAxisLabel tsi-AxisLabel")
            .merge(this.yAxisLabel)
            .style("text-anchor", "middle")
            .attr("transform", "translate(" + ( -70 ) + " ," + (this.chartHeight / 2) + ") rotate(-90)")
            .text(null);
        yAxisLabel.each(function(d) {
            let label = d3.select(this);
            Utils.appendFormattedElementsFromString(label, d, {inSvg: true});
        });
        //text is either in tspans or just in text. Either truncate text directly or through tspan
        if (yAxisLabel.selectAll("tspan").size() == 0)
            truncateTextLength(yAxisLabel, this.chartHeight)
        else {
            yAxisLabel.selectAll("tspan").each(function() {
                var tspanTextSelection = d3.select(this);
                truncateTextLength(tspanTextSelection, self.chartHeight / yAxisLabel.selectAll("tspan").size());
            });
        }
        this.yAxisLabel.exit().remove();
    }