private drawAxesLabels()

in src/radarChart.ts [835:919]


    private drawAxesLabels(values: RadarChartLabel[], dataViewMetadataColumn?: DataViewMetadataColumn): void {
        let labelSettings: LabelSettings = this.radarChartData.settings.labels;

        let selectionLabelText: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = this.mainGroupElement
            .select(RadarChart.AxisSelector.selectorName)
            .selectAll(RadarChart.AxisLabelSelector.selectorName);

        let filteredData: RadarChartLabel[] = values.filter((label: RadarChartLabel) => labelSettings.show && !label.hide);

        let labelsSelection: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = selectionLabelText.data(filteredData);

        labelsSelection
            .exit()
            .remove();

        labelsSelection = labelsSelection
            .enter()
            .append("svg:text")
            .classed(RadarChart.AxisLabelSelector.className, true)
            .merge(labelsSelection)
            .attr("dy", `${RadarChart.LabelYOffset}em`)
            .attr("transform", translate(RadarChart.LabelXOffset, -RadarChart.LabelYOffset * labelSettings.fontSize))
            .attr("x", (label: RadarChartLabel) => {
                let shift: number = label.textAnchor === RadarChart.TextAnchorStart ? +RadarChart.LabelPositionXOffset : -RadarChart.LabelPositionXOffset;
                return label.x + shift;
            })
            .attr("y", (label: RadarChartLabel) => label.y)
            .text((label: RadarChartLabel) => {
                let properties: TextProperties = {
                    fontFamily: RadarChart.AxesLabelsFontFamily,
                    fontSize: PixelConverter.fromPoint(labelSettings.fontSize),
                    text: this.radarChartData.labels.formatter.format(label.text)
                };

                return textMeasurementService.getTailoredTextOrDefault(properties, label.maxWidth);
            })
            .style("font-size", () => PixelConverter.fromPoint(labelSettings.fontSize))
            .style("text-anchor", (label: RadarChartLabel) => label.textAnchor)
            .style("fill", () => labelSettings.color);

        let selectionLongLineLableLink: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = this.mainGroupElement
            .select(RadarChart.AxisSelector.selectorName)
            .selectAll(RadarChart.AxisLabelLinkLongLineSelector.selectorName);

        let labelsLongLineLinkSelection: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = selectionLongLineLableLink.data(filteredData);

        labelsLongLineLinkSelection
            .exit()
            .remove();

        labelsLongLineLinkSelection = labelsLongLineLinkSelection
            .enter()
            .append("svg:line")
            .classed(RadarChart.AxisLabelLinkLongLineSelector.className, true)
            .merge(labelsLongLineLinkSelection)
            .attr("x1", (label: RadarChartLabel) => label.xLinkBegin)
            .attr("y1", (label: RadarChartLabel) => label.yLinkBegin)
            .attr("x2", (label: RadarChartLabel) => label.xLinkEnd)
            .attr("y2", (label: RadarChartLabel) => label.yLinkEnd);

        let selectionShortLineLableLink: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = this.mainGroupElement
            .select(RadarChart.AxisSelector.selectorName)
            .selectAll(RadarChart.AxisLabelLinkShortLineSelector.selectorName);

        let labelsShortLineLinkSelection: d3.Selection<d3.BaseType, RadarChartLabel, any, any> = selectionShortLineLableLink.data(filteredData);

        labelsShortLineLinkSelection
            .exit()
            .remove();

        labelsShortLineLinkSelection = labelsShortLineLinkSelection
            .enter()
            .append("svg:line")
            .classed(RadarChart.AxisLabelLinkShortLineSelector.className, true)
            .merge(labelsShortLineLinkSelection)
            .attr("x1", (label: RadarChartLabel) => label.xLinkEnd)
            .attr("y1", (label: RadarChartLabel) => label.yLinkEnd)
            .attr("x2", (label: RadarChartLabel) => {
                let shift: number = label.textAnchor === RadarChart.TextAnchorStart ? +(RadarChart.LabelPositionXOffset - 2) : -(RadarChart.LabelPositionXOffset - 2);
                return label.xLinkEnd + shift;
            })
            .attr("y2", (label: RadarChartLabel) => label.yLinkEnd);

        this.changeAxesLineColorInHighMode([labelsShortLineLinkSelection, labelsLongLineLinkSelection]);
    }