in src/Sunburst.ts [377:444]
private render(colorHelper: ColorHelper): Selection<BaseType, HierarchyRectangularNode<SunburstDataPoint>, BaseType, SunburstDataPoint> {
const root = this.partition(this.data.root).descendants().slice(1);
const pathSelection: Selection<BaseType, HierarchyRectangularNode<SunburstDataPoint>, BaseType, SunburstDataPoint> =
this.main
.selectAll("path");
const pathSelectionData = pathSelection.data(root);
pathSelectionData
.exit()
.remove();
const pathSelectionEnter: Selection<BaseType, HierarchyRectangularNode<SunburstDataPoint>, BaseType, SunburstDataPoint> =
pathSelectionData.enter()
.append("path");
const pathSelectionMerged = pathSelectionEnter.merge(pathSelection);
pathSelectionMerged
.classed(this.appCssConstants.slice.className, true)
.style("fill", slice => colorHelper.isHighContrast ? null : slice.data.color)
.style("stroke", slice => colorHelper.isHighContrast ? slice.data.color : null)
.style("stroke-width", () => colorHelper.isHighContrast ? PixelConverter.toString(2) : null)
.attr("d", this.arc);
if (this.settings.group.showDataLabels) {
const self = this;
pathSelectionMerged.each(function (d: HierarchyRectangularNode<SunburstDataPoint>, i: number) {
const firstArcSection: RegExp = /(^.+?)L/;
const currentSelection = d3Select(this);
const arcRegExpArray: RegExpExecArray = firstArcSection.exec(currentSelection.attr("d"));
// if slice is section
if (arcRegExpArray) {
let newArc: string = arcRegExpArray[1];
newArc = newArc.replace(/,/g, " ");
self.main.append("path")
.classed(self.appCssConstants.sliceHidden.className, true)
.attr("id", "sliceLabel_" + i)
.attr("d", newArc);
} else {
currentSelection
.attr("id", "sliceLabel_" + i);
}
});
this.main
.selectAll(this.appCssConstants.sliceLabel.selectorName)
.data(root)
.enter()
.append("text")
.style("fill", colorHelper.getHighContrastColor("foreground", null))
.classed(this.appCssConstants.sliceLabel.className, true)
// font size + slice padding
.attr("dy", (d, i) => {
return Sunburst.LabelShift - d.depth*Sunburst.LabelShiftMultiplier;
})
.append("textPath")
.attr("startOffset", "50%")
.attr("xlink:href", (d, i) => "#sliceLabel_" + i)
.text(dataPoint => dataPoint.data.name)
.each(this.wrapPathText(Sunburst.DefaultDataLabelPadding));
}
this.renderTooltip(pathSelectionMerged);
this.setCategoryLabelPosition(this.viewport.width);
this.setPercentageLabelPosition(this.viewport.width);
return pathSelectionMerged;
}