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]);
}