private renderLinkLabels()

in src/sankeyDiagram.ts [1824:1929]


    private renderLinkLabels(sankeyDiagramDataView: SankeyDiagramDataView): void {
        // create labels on link as A - B : Value
        let linkTextData: SankeyDiagramLink[] = sankeyDiagramDataView.links.filter((link: SankeyDiagramLink) => {
            return link.height > SankeyDiagram.MinSize && this.dataView.settings.linkLabels.show;
        });

        let linkArrowData: SankeyDiagramLink[] = sankeyDiagramDataView.links.filter((link: SankeyDiagramLink) => {
            return link.height > SankeyDiagram.MinSize && link.direction !== SankeyLinkDirrections.SelfLink;
        });

        // add defs element to svg
        let svgDefs: Selection<any> = this.root
            .selectAll("defs");

        let svgDefsSelectionData: UpdateSelection<Number> = svgDefs.data([1]);
        let svgDefsSelectionEnter = svgDefsSelectionData
            .enter()
            .append("defs");

        svgDefsSelectionData
            .exit()
            .remove();

        let svgDefsSelectionMerged = svgDefsSelectionEnter.merge(svgDefs);

        let singleDefsElement: Selection<any> = d3.select(svgDefsSelectionMerged.node());

        // add text path for lables
        let linkLabelPaths: Selection<any> = singleDefsElement.selectAll(SankeyDiagram.LinkLabelPathsSelector.selectorName);

        let linkLabelPathsSelectionData: UpdateSelection<SankeyDiagramLink> = linkLabelPaths.data(linkArrowData);

        linkLabelPathsSelectionData
            .exit()
            .remove();

        let linkLabelPathsSelectionEnter = linkLabelPathsSelectionData
            .enter()
            .append("path");

        let linkLabelPathsSelectionMerged = linkLabelPathsSelectionEnter.merge(linkLabelPaths);

        linkLabelPathsSelectionMerged
            .classed(SankeyDiagram.LinkLabelPathsSelector.className, true)
            .attr(
                "d", (link: SankeyDiagramLink) => {
                    if (link.direction === SankeyLinkDirrections.Forward) {
                        return this.getLinkLabelSvgPath(link);
                    }
                }
            )
            .attr(
                "id", (link: SankeyDiagramLink) => {
                    return SankeyDiagram.createLink(link, true);
                }
            );

        // add text by using paths from defs
        let linkLabelTexts: Selection<any> = this.main
            .select(SankeyDiagram.LinksSelector.selectorName)
            .selectAll(SankeyDiagram.LinkLabelTextsSelector.selectorName);

        let linkLabelTextSelectionData: UpdateSelection<SankeyDiagramLink> = linkLabelTexts
            .data(linkTextData);

        linkLabelTextSelectionData
            .exit()
            .remove();

        let linkLabelTextSelectionEnter = linkLabelTextSelectionData
            .enter()
            .append("text");

        let linkLabelTextSelectionMerged = linkLabelTextSelectionEnter.merge(linkLabelTexts);

        linkLabelTextSelectionMerged
            .attr("text-anchor", "middle")
            .classed(SankeyDiagram.LinkLabelTextsSelector.className, true);

        let textPathSelection: UpdateSelection<SankeyDiagramLink> = linkLabelTextSelectionMerged
            .selectAll("textPath");

        let textPathSelectionData = textPathSelection.data(data => [data]);

        textPathSelectionData
            .exit()
            .remove();

        let textPathSelectionEnter = textPathSelectionData
            .enter()
            .append("textPath");

        let textPathSelectionMerged = textPathSelectionEnter.merge(textPathSelection);

        textPathSelectionMerged
            .attr("startOffset", "50%")
            .attr(
                "href", (link: SankeyDiagramLink) => {
                    return `#${SankeyDiagram.createLink(link, true)}`;
                })
            .style("font-size", this.dataView.settings.linkLabels.fontSize)
            .style("fill", this.dataView.settings.linkLabels.fill)
            .text((link: SankeyDiagramLink) => (link.label && (link.label.length > 0)) ? link.label :
                `${link.source.label.name || ""}-${link.destination.label.name || ""}:${(link.tooltipInfo[2] || { value: "" }).value}`
            );
    }