in src/TornadoChart.ts [1057:1121]
private renderCategories(): void {
let settings: TornadoChartSettings = this.dataView.settings,
color: string = settings.categoriesFillColor,
fontSizeInPx: string = PixelConverter.fromPoint(settings.categoriesFontSize),
position: string = dataViewObject.getValue(this.dataView.categoriesObjectProperties, "position", legendPosition.left),
categoriesSelectionMerged: Selection<any>,
categoriesSelection: Selection<any>,
categoryElements: Selection<any> = this.main
.select(TornadoChart.Categories.selectorName)
.selectAll(TornadoChart.Category.selectorName);
if (!settings.showCategories) {
categoryElements.remove();
return;
}
categoriesSelection = categoryElements.data(this.dataView.categories);
categoriesSelectionMerged = categoriesSelection
.enter()
.append("g")
.merge(categoriesSelection);
categoriesSelectionMerged
.append("svg:title")
.classed(TornadoChart.CategoryTitle.className, true);
categoriesSelectionMerged
.append("svg:text")
.classed(TornadoChart.CategoryText.className, true);
let xShift: number = 0;
if (position === "Right") {
let width: number = this.viewport.width + this.margin.left + this.margin.right;
xShift = width - this.allLabelsWidth;
}
categoriesSelectionMerged
.attr("transform", (text: string, index: number) => {
let shift: number = (this.heightColumn + this.columnPadding) * index + this.heightColumn / 2,
textData: TextData = TornadoChart.getTextData(text, this.textOptions, false, true);
shift = shift + textData.height / 2 - this.InnerTextHeightDelta;
return translate(xShift, shift);
})
.classed(TornadoChart.Category.className, true);
categoriesSelectionMerged
.select(TornadoChart.CategoryTitle.selectorName)
.text((text: TextData) => text.text);
categoriesSelectionMerged
.select(TornadoChart.CategoryText.selectorName)
.attr("fill", color)
.attr("font-size", fontSizeInPx)
.text((data: TextData) => this.dataView.settings.showCategories
? textMeasurementService.getTailoredTextOrDefault(
TornadoChart.getTextData(data.text, this.textOptions).textProperties, this.allLabelsWidth)
: "");
categoriesSelection
.exit()
.remove();
}