private render()

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